Question

我在print-js documentation上阅读了它，我们可以将样式作为字符串传递给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;");
        },

Answer 1

正如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-element1和my-element2中应用的传递样式的示例：

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

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

Answer 2

在文档中说，您可以将对象作为参数来配置选项。.

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;'});
},

尝试从vuejs组件打印时，样式参数不适用于print-js

2 个答案: