前端导出pdf以及导出内容截断的解决办法

基于html2canvas.js、jspdf.js
使用前需引入这两个js文件
html部分：
<div id="print">
    打印的内容区域
</div>

js部分：

downloadPdf() {
  let pdfName = new Date().getTime()
  let id = 'print'
  var target = document.getElementById(id)
  target.style.background = '#FFFFFF'
  html2canvas(target, {
    allowTaint: true,
    dpi: window.devicePixelRatio, // 提升导出文件的分辨率
    scale: 4,// 提升导出文件的分辨率
    onrendered: function(canvas) {
      //未生成pdf的html页面高度
      var leftHeight = canvas.height;

      var a4Width = 190
      var a4Height = 277   //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
      //一页pdf显示html页面生成的canvas高度;
      var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);

      //pdf页面偏移
      var position = 0;

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

      var pdf = new jsPDF('p', 'mm', 'a4');    //A4纸，纵向
      var index = 1,
        canvas1 = document.createElement('canvas'),
        height;
      pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');
      // var pdfName='TriButte漏洞管理平台扫描报告';
      function createImpl(canvas) {
        if (leftHeight > 0) {
          index++;

          var checkCount = 0;
          if (leftHeight > a4HeightRef) {
            var i = position + a4HeightRef;
            for (i = position + a4HeightRef; i >= position; i--) {
              var isWrite = true
              for (var j = 0; j < canvas.width; j++) {
                var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data

                if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
                  isWrite = false
                  break
                }
              }
              if (isWrite) {
                checkCount++
                if (checkCount >= 10) {
                  break
                }
              } else {
                checkCount = 0
              }
            }
            height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
            if(height<=0){
              height = a4HeightRef;
            }
          } else {
            height = leftHeight;
          }

          canvas1.width = canvas.width;
          canvas1.height = height;

          console.log(index, 'height:', height, 'pos', position);

          var ctx = canvas1.getContext('2d');
          ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height);

          var pageHeight = Math.round(a4Width / canvas.width * height);
          // pdf.setPageSize(null, pageHeight)
          if(position != 0){
            pdf.addPage();
          }
          pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4Width, a4Width / canvas1.width * height);
          leftHeight -= height;
          position += height;
          if (leftHeight > 0) {
            setTimeout(createImpl, 500, canvas);
          } else {
            pdf.save(pdfName + '.pdf');
          }
        }
      }

      //当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < a4HeightRef) {
        pdf.addImage(pageData, 'JPEG', 10, 10, a4Width, a4Width / canvas.width * leftHeight);
        pdf.save(pdfName + '.pdf')
      } else {
        try {
          setTimeout(createImpl, 500, canvas);
        } catch (err) {
          console.log(err);
        }
      }
    }
  })
}