基于window.html2canvas的打印功能。适用于打印浏览器上内容。将内容转换成图片来导出成PDF文件。VUE打印功能

基于window.html2canvas的打印功能。适用于打印浏览器上内容。将内容转换成图片来导出成PDF文件。VUE打印功能

做一个记录

直接封装成一个方法printPDF

vue项目直接调用打印方法：this.printPDF(document.getElementById("printPDF"), "打印文件的名称");

(document.getElementById("printPDF")===》通过getElementById来获取打印的的内容。如 id="printPDF"，直接定位到需要打印的内容上面。

下面是打印的具体方法实现

Loading：这里直接引用elementUI的loadind组件

引入即可：import { Loading } from 'element-ui';

 

printPDF(targetDom, name = new Date().getTime(), colorName = "#fff") {

      let loadingInstance = Loading.service({

        fullscreen: true,

        text: "正在生成PDF"

      });//通过组件设置loading

      let newNode = targetDom.cloneNode(true); // 复制打印数据

      let newDom = document.createElement("div"); // 新建DIV

      newDom.setAttribute("id", "showPdfContent");

      window.document.body.appendChild(newDom);

 

      document.getElementById("showPdfContent").style.visibility = "hidden"; // 隐藏新建DIV

      document.getElementById("showPdfContent").appendChild(newNode); // 导出打印数据

 

      window.html2canvas(targetDom, {

        allowTaint: true,

        taintTest: false,

        scale: "2",

        dpi: "192",

        background: colorName,

        onrendered: canvas => {

          let contentWidth = canvas.width;

          let contentHeight = canvas.height;

          let pageHeight = (contentWidth / 592.28) * 841.89;

          let leftHeight = contentHeight;

          let position = 0;

          let imgWidth = 595.28;

          let imgHeight = (592.28 / contentWidth) * contentHeight;

 

          let pageData = new Image();

          //设置图片跨域访问

          pageData.setAttribute("crossOrigin", "Anonymous");

 

          // setTimeout(() => {

          pageData = canvas.toDataURL("image/jpeg", 1.0);

          let PDF = new window.jsPDF("", "pt", "a4");

          if (leftHeight < pageHeight) {

            PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);

          } else {

            while (leftHeight > 0) {

              PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);

              leftHeight -= pageHeight;

              position -= 841.89;

              if (leftHeight > 0) {

                PDF.addPage();

              }

            }

          }

          PDF.save(`${name}.pdf`);

          document.getElementById("showPdfContent").innerHTML = ""; // 清除打印数据

          loadingInstance.close(); // 关闭遮罩

          // }, 1);

        }

      });

    },

 

上面就是具体实现浏览器内容转图片来通过window.html2canvas与window.jsPDF的打印方法来导出PDF文件

在使用的过程中，可能会出现一些bug。比如打印按钮的定义需要在最顶端。不然会出现打印内容不全的问题。（具体原因没有找到）

当然也不是没有解决方法，我们取巧处理一下

    //这个打印方法有点小缺陷，只有在最顶上的时候，打印的内容才是完整的，所以我设置成先回到顶部在打印

      this.$el.parentNode.scrollTop = 0;//回到顶部

先用上述代码回到页面的最顶端然后在调用我的打印方法就好啦！

下面附上一张打印PDF效果图：

与浏览器显示内容90%以上相似。