1、npm 安装

npm install jspdf --save
npm install --save html2canvas

2、在需要打印的页面导入

import html2Canvas from "html2canvas";
import JsPDF from "jspdf";

3、页面直接调用该方法即可(“#subOutputRank“页面的dom节点)

printOut22() {
      var title = this.teacher;
      var that = this;
      html2Canvas(document.querySelector("#subOutputRank"), { 
        allowTaint: true
      }).then(function(canvas) {
        console.log( canvas.height);
        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 = canvas.toDataURL("image/jpeg", 1.0);
        let PDF = new 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 -= 842;
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(title + ".pdf");
        that.dianpingShow = true;
      });
    },
Logo

前往低代码交流专区

更多推荐