vue分页打印

使用了麻友建议的# vue-print-nb，使用page-break-after来进行分页，结果都不尽人意，最后选择了Print.js

使用 Print.js解决打印table，数据量超出一张纸，导致打印不全

1. 安装好 Print.js:
   npm install print-js --save
2. 引用包(在你页面里面或者全局)：
   import printJS from "print-js";
3. 实现一个按钮或者啥触发打印页面方法：
   <el-button style="height: fit-content; margin-top: auto;" type="success" plain @click="printHtmlCss">打印</el-button>
4. 在打印方法中实现样式，以及对应 ID的 div:

建议引用 css文件只保留需要打印页面的样式，因为我把所有样式引用发现不分页

//  直接引用  css文件
  printHtmlCss() {
      printJS({
        printable: "container",
        type: "html",
        css: [
          "../../../../static/css/processinfo.css",
          "../../../../static/css/element-ui/index.css"
        ], //引入css文件
        scanStyles: false
      });
    },
//  直接引用样式
    printHtmlCustomStyle() {
      const style = "@page { margin: 0 } @media print { h1 { color: blue } }"; //直接写样式
      printJS({
        printable: "container",
        type: "html",
        style: style,
        scanStyles: false
      });
    },

5. 查看结果：

   
   需要打印的页面
   弹出的打印页面

有人会问为啥你那个按钮怎么在打印的页面中不显示，而且表单的数据也变少了， 嘿嘿，那是因为我在该页面 把需要打印的复制了一份，因为我发现如果有滚动条他打印不会分页，会把滚动条也打印上（见”弹出的打印页面“的第二张的横向滚动条）而系统为了用户的体验需要滚动条，所以我复制了一份使其没有滚动条，并且把一些不需要打印的去除，使其不显示即可，当然你也可以不需要复制一份，把重写的样式放在printJS 中css指定的文件中即可，到此结束，有问题可以咨询，谢谢。
个人博客