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

使用 print.js 打印时，由于打印页面的大小和原页面大小不一致，可能会导致一些样式失效，包括滚动条。你可以尝试在打印之前隐藏滚动条，打印完成后再显示滚动条。

可以使用以下代码实现：

// 隐藏滚动条
document.body.style.overflow = 'hidden';

// 使用 print.js 打印

// 打印完成后显示滚动条
document.body.style.overflow = 'auto';

另外，如果使用的是 vue，可以在打印时使用 `this.$nextTick()` 等待页面渲染完成再隐藏滚动条，以避免一些渲染问题。具体代码如下：

printJS({
  printable: 'printable-element-id',
  type: 'html',
  onPrintDialogClose: function() {
    // 等待页面渲染完成
    this.$nextTick(() => {
      // 隐藏滚动条
      document.body.style.overflow = 'hidden';
    });
  },
  onError: function(error) {
    console.error(error);
  }
});

同样，在打印完成后也需要使用 `this.$nextTick()` 等待页面渲染完成再显示滚动条。

相关问题

vue2 vue-print-nb 打印横向滚动条

Vue-print-nb 是一个 Vue 插件，用于生成 PDF文件。至于生成的 PDF 文件是否具有横向滚动条，取决于所使用的 PDF 阅读器和打印设置。

通常来说，PDF 文件在多数阅读器和打印机上默认为竖向滚动条。而横向滚动条通常用于展示宽度较大的内容，例如表格或大幅图片。如果需要在生成的PDF文件中使用横向滚动条，可以考虑以下方法：

1. 使用 CSS 样式：在 Vue-print-nb 的打印内容中，可以添加 CSS 样式来控制 PDF 文件的显示方式。可以使用`overflow-x: scroll;`来实现横向滚动条。这样，在具有横向滚动条的情况下，当滚动 PDF 页面时，内容会横向滚动。

2. 使用 PDF 阅读器设置：在打印 PDF 文件之前，可以在 PDF 阅读器中进行设置，以显示横向滚动条。不同的 PDF 阅读器可能具有不同的设置方式，可以在打印预览界面或打印设置中查找相关选项，并启用横向滚动条。

需要注意的是，不同的 PDF 阅读器可能在打印设置中提供不同的选项。因此，具体如何生成带有横向滚动条的 PDF 文件可能会因阅读器而异。可以根据使用的 PDF 阅读器和打印设置进行调整，以满足对横向滚动条的需求。