React分离PDF页面静态化

Question

在我的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");
    });

这个功能很好用，完美地导出了所有内容，但是它会把页面的某些部分分为两部分 - 如果元素从第一页底部开始，它会在第二页顶部结束。我知道这是由于这两个属性 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/>

第二页：

<Component3 />
<Component4 break/>

第三页：

<Component5 />
<Component6 />

更新：

这是切割的样子：

- Borislav Stefanov

---

但它会将页面的某些部分切成两个部分 - 如果元素在第一页底部开始，则在第二页顶部结束。您能演示一下这部分内容吗？可以展示一张截图吗？ - Zack Heisenberg

请原谅我的问题，但是用户自己处理“打印为PDF”时，<link rel="stylesheet" media="print" href="/css/pdf.css">有什么问题吗？ - Mike 'Pomax' Kamermans

@MohammedMounir 不，我改变了这个策略。我在后端创建了一个端点，用于创建带有图形和数据表的PDF。虽然与我的React应用程序不完全相同，但非常相似。 - Borislav Stefanov

你找到解决方案了吗？我也遇到了类似的问题 - https://stackoverflow.com/questions/73772866/how-to-fix-content-cut-off-issues-in-jspdf-html2canvas - SDK

@SDK 和我上次的评论一样。 - Borislav Stefanov

Answer 1

你可以使用 break-before CSS 属性来实现这个功能。

https://developer.mozilla.org/en-US/docs/Web/CSS/break-before

- David Bradshaw