vue使用printJs实现前端打印,以及打印分页实现

在Vue中使用print.js实现前端打印功能，并实现打印分页，你需要做以下几步：

1. 安装print.js依赖：

npm install print-js --save

2. 在Vue组件中引入print.js：

import printJS from 'print-js';

3. 准备需要打印的内容，并使用print.js API进行打印。
4. 如果需要实现打印分页，可以使用CSS打印控制属性如page-break-before或page-break-after。

以下是一个简单的例子：

<template>
  <div>
    <button @click="printContent">打印内容</button>
    <div id="printable" style="display: none;">
      <!-- 这里是你要打印的内容 -->
      <div>第一页内容</div>
      <div style="page-break-before: always;">第二页内容</div>
    </div>
  </div>
</template>
 
<script>
import printJS from 'print-js';
 
export default {
  methods: {
    printContent() {
      printJS({
        printable: 'printable',
        type: 'html',
        scanStyles: false
      });
    }
  }
};
</script>

在这个例子中，我们创建了一个Vue组件，其中包含一个隐藏的div（id为printable），这个div包含了我们想要打印的内容。我们使用按钮触发printContent方法，该方法调用print.js来打印printable元素。在内容中，我们使用CSS属性page-break-before: always;来实现打印分页。当用户点击按钮时，对应的内容将会被打印出来。