1

我在print-js 文档中读到，我们可以将样式作为字符串传递给printJS函数，这样我们传入的样式就会被应用，但是我遇到了一个不允许打印发生的错误：

我收到此错误：ReferenceError: Can't find variable: style

我正在像这样在 vue 组件中将样式传递给 printJS

        printSlip: function(){
            printJS('printSlip', 'html', style="display: inline-block; text-align: center; padding: 30px; margin: 15px; text-align: center; padding: 15px; vertical-align: top;");
        },
4

2 回答 2

4

正如 Husan Ibrahim 已经回答的那样，要使用style参数，您需要使用对象语法。Husan 错过的是，该style参数期望您定位应该应用样式的位置。

传递display: inline-block; text-align: center; padding: 30px; margin: 15px; text-align: center; padding: 15px; vertical-align: top;时，浏览器将不知道要应用样式的元素。

假设您想将其应用于身体，这将是有效的body { display: inline-block; text-align: center; padding: 30px; margin: 15px; text-align: center; padding: 15px; vertical-align: top; }

这是一个示例传递样式以应用于my-element1and my-element2：

printSlip() {
    printJS({
        printable: 'printSlip', 
        type: 'html', 
        style: '#my-element1 { color: blue; } #my-element2 { color: red; }'
    })
}

传递自定义样式的实时示例： https ://codesandbox.io/s/x72j429vr4

于 2018-12-26T03:28:36.717 回答
1

在文档中说您可以将对象作为参数传递给配置选项..

Print.js 将接受一个对象作为参数，您可以在其中配置一些选项

printSlip: function(){
    printJS({printable: 'printSlip', type: 'html', style: 'display: inline-block; text-align: center; padding: 30px; margin: 15px; text-align: center; padding: 15px; vertical-align: top;'});
},
于 2018-12-23T09:26:23.747 回答