首页vue使用print.js打印滚动条失效

vue使用print.js打印滚动条失效

时间: 2023-08-13 19:07:25 浏览: 206

使用 print.js 打印时，由于打印页面的大小和原页面大小不一致，可能会导致一些样式失效，包括滚动条。你可以尝试在打印之前隐藏滚动条，打印完成后再显示滚动条。可以使用以下代码实现： ```javascript // 隐藏滚动条 document.body.style.overflow = 'hidden'; // 使用 print.js 打印 // 打印完成后显示滚动条 document.body.style.overflow = 'auto'; ``` 另外，如果使用的是 vue，可以在打印时使用 `this.$nextTick()` 等待页面渲染完成再隐藏滚动条，以避免一些渲染问题。具体代码如下： ```javascript printJS({ printable: 'printable-element-id', type: 'html', onPrintDialogClose: function() { // 等待页面渲染完成 this.$nextTick(() => { // 隐藏滚动条 document.body.style.overflow = 'hidden'; }); }, onError: function(error) { console.error(error); } }); ``` 同样，在打印完成后也需要使用 `this.$nextTick()` 等待页面渲染完成再显示滚动条。

阅读全文