vue2使用print.js打印时伪元素伪类的样式丢失

这个问题可能是由于打印机的兼容性问题导致的，可能是打印机不支持某些 CSS 样式属性。你可以尝试以下几种方法解决该问题：

1. 设置打印样式表：在打印时，可以使用 `@media print` 媒体查询来设置打印样式表，使得在打印时可以针对性地修改一些样式，比如去掉一些不必要的元素、调整字体大小等等。在打印样式表中，可以尝试使用 `!important` 来强制覆盖一些样式。

2. 使用 `page-break` 属性：如果打印出来的内容比较长，可能会出现分页的情况。这时可以使用 `page-break` 属性来控制分页，比如 `page-break-inside: avoid` 可以避免将元素分割在两个页面上。

3. 将样式转换为内联样式：在打印时，可以将需要打印的内容的样式转换为内联样式。这样可以保证打印时样式不会丢失。可以使用一些插件或者手写代码来实现样式转换。

希望这些方法能够帮助你解决问题。

相关问题

vue中使用print.js双重遍历获取打印dom

要使用Print.js在Vue中打印DOM，您需要遵循以下步骤：

1. 在Vue组件中安装Print.js：

npm install print-js

2. 导入Print.js：

import PrintJS from 'print-js'

3. 在Vue组件中编写打印代码。例如，如果您想打印具有“print”类的DOM元素，可以使用以下代码：

methods: {
  print() {
    PrintJS({
      printable: 'print', // DOM元素的ID或类
      type: 'html',
      documentTitle: 'Print Document'
    })
  }
}

4. 在Vue模板中添加一个按钮，以便用户触发打印函数：

<template>
  <div>
    <button @click="print">Print</button>
    <div class="print">Print this!</div>
  </div>
</template>

5. 运行应用程序，单击“打印”按钮即可打印DOM元素。

请注意，Print.js提供了许多其他选项，例如自定义打印窗口的标题和CSS样式。有关更多详细信息，请参阅Print.js文档。

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()` 等待页面渲染完成再显示滚动条。