前端导出pdf文档

父组件

    handleExport() {
      const WeWorkRef = this.$refs.WeWorkRef;
      if (WeWorkRef) {
        this.isWeWorkExportLoading = true;
        WeWorkRef.handleExport();
      }
    },


      
        

          
        
      

WeWork.vue

    里面放pdf导出内容， 如果内容非常多，很长， 可以设置多个 .a4-page-cut-img-coninte； 避免截图空白；


import html2canvas from "html2canvas";
import { jsPDF } from "jspdf";

  data() {
    return {
      details: {},
      isLoading: false,
      isExportLoading: false,
      progressVisible: false,
      progressPrecent: 0
    };
  },

    handleExport() {
      this.$emit("loading", true);
      this.isExportLoading = true;
      this.$nextTick(() => {
        this.handleHtml2Canval2();
      });
    },

    handleCurtA4(canvas, pdf) {
      const A4PageW = 595.28;
      var contentWidth = canvas.width;

      var contentHeight = canvas.height;

      //一页pdf显示html页面生成的canvas高度;

      var pageHeight = (contentWidth / A4PageW) * 841.89;

      //未生成pdf的html页面高度

      var leftHeight = contentHeight;

      //页面偏移

      var position = 0;
      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

      var imgWidth = A4PageW;
      var imgHeight = (A4PageW / contentWidth) * contentHeight;

      var pageData = canvas.toDataURL("image/JPEG", 0.9);

      //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)

      //当内容未超过pdf一页显示的范围，无需分页

      // if (leftHeight < pageHeight) {
      //   pdf.addImage(pageData, "png", 0, 0, imgWidth, imgHeight);
      // } else {
      // let isFirst = true;
      while (leftHeight > 0) {
        // if (!(index === 0 && isFirst)) {
        // }
        // isFirst = false;
        pdf.addPage([imgWidth, imgHeight < pageHeight ? pageHeight : imgHeight]);
        pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        // leftHeight -= pageHeight;
        leftHeight= -1;
        position -= 841.89;
        console.log(
          "imgHeight",
          imgWidth,
          imgHeight,
          contentHeight,
          pageHeight,
          contentWidth,
          position
        );

        //避免添加空白页

        // if (leftHeight > 0) {
        //   pdf.addPage();
        // }
      }
      // }
      return pdf;
    },

    async handleHtml2Canval2() {
      const that = this;
      const doms = document.querySelectorAll(".a4-page-cut-img-coninter");
      
      var pdf = new jsPDF("", "pt", "a4", true);
      const canvasList = [];
      let copyCanvasH = 0;
      this.progressVisible = true;
      this.progressPrecent = 0;
      for (let index = 0; index < doms.length; index++) {
        const dom2 = doms[index];
        let progressPrecent = Math.ceil((index / doms.length) * 100)
        const canvaslls = await this.handleCanvalTurn(dom2, Math.ceil((1 / doms.length) * 100));
        this.progressPrecent = progressPrecent
        canvasList.push(...canvaslls);
        canvaslls.forEach(canvas => {
          copyCanvasH = copyCanvasH + canvas.height;
          pdf = that.handleCurtA4(canvas, pdf, 0);
        })
      }
      this.progressPrecent = 100;
      pdf.deletePage(1)
   
      const workTitleName = `${that.workTitleName || "weWork报告"}${
        that.details.date ? "(" + that.details.date + ")" : ""
      }.pdf`;
      this.progressVisible = false;
      pdf.save(`${workTitleName}`);
      that.$emit("loading", false);
      this.isExportLoading = false;
    },


    async handleCanvalTurn(el, progressPrecent) {
        // 创建 canvas 画布
        var canvas = document.createElement("canvas");
        // 2d 渲染对象
        // 整个文档的宽高
        const scale = 1;
        canvas.width = el.offsetWidth * scale;
        canvas.height = el.offsetHeight * scale;
        var height = el.offsetHeight;
        let pageSize = height > 20000 ? 20000 : height;
        let pageTotal = Math.ceil(height / (pageSize));
        let backp = (620 / 1.36) - 47; // 57
        height = height + (pageTotal - 1) * backp
        pageTotal = Math.ceil(height / (pageSize));
        let y = 0;
        let canvasList = [];
        for (let index = 0; index < pageTotal; index++) {
          // 最后一个；
          if (index === pageTotal - 1) {
            pageSize = height - y
          }
          let canvas = await html2canvas(el, {
            allowTaint: true,
            scale: scale, // 提升画面质量，但是会增加文件大小
            height: pageSize,
            y: index > 0 ? y - index * backp : y,
            useCORS: true,
            windowHeight: pageSize
          });
          y+= pageSize;
          canvasList.push(canvas);
          this.progressPrecent = this.progressPrecent + Math.floor((progressPrecent/pageTotal * index));
        }
        return canvasList;
    },