前端 打印PrintJS

场景 单页打印  使用HTML2canvas 转出图片 然后使用Print

    handlePrints(key) {
      this.printing = true;
      setTimeout(() => {
        this.$html2canvas(this.$refs[key].$refs["printEle"], {
          backgroundColor: "white",
          useCORS: true,
          foreignObjectRendering: false,
          windowWidth: document.body.scrollWidth,
          windowHeight: document.body.scrollHeight,
        }).then((canvas) => {
          const url = canvas.toDataURL();
          this.printing = false;
          this.$print({
            printable: url,
            type: "image",
            documentTitle: "--",
            base64: "true",
          });
        });
      });
    },

场景 批量打印 可能就不能用转成图片的形式了 这样会被分页截断  自己还是用的printJS 如果有好的方法可以交流交流 

  handlePrints(key) {
      let container = this.$refs[key].$refs["printEle"];
      console.log(container, "DOM");
      printJS({
        printable: container,
        type: "html",
        scanStyles: false,
        style: ``  //这里写打印的样式
})
}

需要注意的是 中途遇到过 打印预览的时候 出现过 前面空白一页  或者说 是 文件 居中等等问题 有的样式在print中无法使用等

如遇到空白 一页 打印内容 无法居中问题

     @page{
          size:auto;
          margin:1cm 0.5cm;
        }

在打印样式用 加入上图样式  如果遇到打印表格 可以加上<thead> 标签 在遇到分页 第二页可以显示表头  如果批量打印想要断页 ，可以加入内联样式

   <div style="page-break-after: always"><div>