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

Question

我在print-js documentation上读到了它我们可以将样式作为字符串传递给 printJS 函数，以便应用我们传入的样式，但我遇到了不允许打印发生的错误:

我收到此错误:ReferenceError:找不到变量:样式

我将样式传递给 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 参数期望您定位应应用样式的位置。

传递时显示:inline-block;文本对齐:居中；内边距:30px；边距:15 像素；文本对齐:居中；内边距:15px； Vertical-align: top;，浏览器不会知道哪些元素要应用该样式。

假设您想将其应用到正文，这将是有效的 body { display: inline-block;文本对齐:居中；内边距:30px；边距:15 像素；文本对齐:居中；内边距:15px；垂直对齐:顶部； }

以下是传递要在 my-element1 和 my-element2 中应用的样式的示例:

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

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