时间戳

首页 > 解决方案 > 尝试从 vuejs 组件打印时样式参数不适用于 print-js

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

问题描述

我在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;");
        },

标签： javascriptvue.jsvuejs2printjs

解决方案

正如 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

推荐阅读