javascript - 反应分离pdf页面静态

问题描述

在我的 React 应用程序中，我有一个长页面，我希望能够以 PDF 格式将其导出。我通过使用 html2canvas 和 jsPDF 实现了这一点。这只是导出它的代码：

html2canvas(document.body).then((canvas) => {
      var imgData = canvas.toDataURL("image/png");
      var imgWidth = 210;
      var pageHeight = 295;
      var imgHeight = (canvas.height * imgWidth) / canvas.width;
      var heightLeft = imgHeight;
      var doc = new jsPDF("p", "mm");
      var position = 0;

      doc.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }
      doc.save("file.pdf");
    });

这非常有效，并且可以完美地导出所有内容，但是它将页面的某些部分切成两部分 - 如果元素从底部的第 1 页开始，它会在顶部的第 2 页结束。我知道这是因为这 2 个道具imgWidth, imgHeight。是否可以在我的组件中手动放置一些东西（整个导出页面的一部分）以显示它应该在哪里中断并开始另一个页面？我的意思是如果整个页面是：

<Component 1/>
<Component 2/>
<Component 3/>
<Component 4/>
<Component 5/>
<Component 6/>

为了能够做到：

    <Component1 />
    <Component2 break/>
    <Component3 />
    <Component4 break/>
    <Component5 />
    <Component6 />

所以基本上我会有 3 页 PDF：第 1 页：

<Component1 />
<Component2 break/>

第 2 页：

<Component3 />
<Component4 break/>

第三页：

<Component5 />
<Component6 />

更新：

这是切割的样子：

标签： javascriptreactjscanvasjspdfhtml2canvas

javascript - 反应分离pdf页面静态

问题描述

解决方案

推荐阅读