vue导出pdf分页时截断

Question

找了好多资料都没用还是会截断

```javascript
export function exportPDFGo(titleName, id) {
  document.body.scrollTop = document.documentElement.scrollTop = 0;
  let el = document.querySelector("#"+id);
  var clientH = el.clientHeight;
  el.style.height = el.scrollHeight + 'px';//把要导出的元素高度设置为滚动高度
  html2canvas(el, {
      allowTaint: true,
      useCORS: true,
      dpi: 120, // 图片清晰度问题
      background: "#142D42", //如果指定的div没有设置背景色会默认成黑色,这里是个坑
      y: 0
  }).then((canvas) => {
      var currentPage = 1;
      //未生成pdf的html页面高度
      var leftHeight = canvas.height;
      var a4Width = 566;
      var a4Height = 762.89; //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", "pt", "a4"); //A4纸，纵向
      pdf.addFont('simkai-normal.ttf', 'simkai', 'normal')
      pdf.setFont('simkai')
      pdf.setFontSize(20)
      var index = 1,
          canvas1 = document.createElement("canvas"),
          height;
      pdf.setDisplayMode("fullwidth", "continuous", "FullScreen");
 
      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;
              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);
              if (position != 0) {
                  pdf.addPage();
              }
              pdf.addImage(
                  canvas1.toDataURL("image/jpeg", 1.0),
                  "JPEG",
                  10,
                  40,
                  a4Width,
                  (a4Width / canvas1.width) * height
              );
              leftHeight -= height;
              position += height;
              if (leftHeight > 0) {
                  setTimeout(createImpl, 500, canvas);
              } else {
                  pdf.save(titleName + ".pdf");
                  //下载完成后改变浏览器界面可视区域高度
                  el.style.height = clientH + 'px'

              }
          }
      }
      
    
      let targetPage = pdf.internal.getNumberOfPages();
      //当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < a4HeightRef) {
          pdf.addImage(
              pageData,
              "JPEG",
              10,
              40,
              a4Width,
              (a4Width / canvas.width) * leftHeight
          );
          pdf.save(titleName + ".pdf");
          //下载完成后改变浏览器界面可视区域高度
          el.style.height = clientH + 'px'
      } else {
          try {
              pdf.deletePage(0);
              setTimeout(createImpl, 500, canvas);
          } catch (err) {
          }finally{
            
          }
      }
  })
}

```

Answer 1

以下回复引自免费微信小程序：皆我百晓生。 如问题解决，还请采纳。如仍有疑问，请回复留言或私信博主，以便获得更精准的帮助。

在VUE中，如果想要使用EXPORT函数导出一个组件的PDF，并且希望导出的PDF分页，那么你可以通过以下步骤来实现：

1. 首先，确保你已经安装了VFILEUPLOAD库，这是一个用于上传文件的插件，可以用来管理文件上传。
2. 然后，在你的VUE应用中导入VFILEUPLOAD模块并注册它。
3. 在你的组件中创建一个新的数据绑定属性，以便在页面加载完成后自动获取PDF文件。
4. 使用VFILEUPLOAD模块将PDF文件拖拽到文件上传框中，然后在页面加载完成后，触发这个事件，以开始导出PDF文件。
5. 在JAVASCRIPT中，利用WINDOW.PRINT()方法来导出PDF文件。

以下是完整的示例代码：

IMPORT VUE FROM 'VUE';
IMPORT VFILEUPLOAD FROM 'VFILEUPLOAD';

VUE.USE(VFILEUPLOAD);

CLASS MYCOMPONENT EXTENDS VUE {
  // ...
}

EXPORT DEFAULT NEW MYCOMPONENT();

在这个例子中，我们首先导入了VFILEUPLOAD模块，然后注册了一个数据绑定属性FILEUPLOAD，以便在页面加载完成后自动获取PDF文件。接下来，我们在<SCRIPT>标签中的<BODY>元素中添加了一个FILEUPLOAD数据绑定属性，这样当用户点击文件上传按钮时，VFILEUPLOAD就会被激活，从而允许我们在页面加载完成后触发PRINT事件，以开始导出PDF文件。

请注意，你需要根据实际情况调整FILEUPLOAD的数据绑定属性和PRINT事件的处理逻辑。例如，你可能需要在PRINT事件处理程序中监听FILEUPLOAD的状态变化，并处理文件上传成功或失败的情况。