如何修复 jspdf / html2canvas 中的内容截断问题？

Question

我正在使用 jspsf 和 html2canvas 将组件转换为 PDF。

下面是代码，

  function generatePDF() {
    const input = document.getElementById("pdf");
    html2canvas(input, {
      logging: true,
      letterRendering: 1,
      scale: 2,
      windowWidth: 1440,
      useCORS: true
    }).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, "jpeg", 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;
      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, "jpeg", 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }

      const pages = doc.internal.getNumberOfPages();

      for (let j = 1; j < pages + 1; j++) {
        let horizontalPos = imgWidth / 2; //Can be fixed number
        let verticalPos = pageHeight - 10; //Can be fixed number
        doc.setPage(j);
        doc.setFontSize(10);
        doc.text(`${j} of ${pages}`, horizontalPos, verticalPos, {
          align: "center" //Optional text styling});
        });
      }

      doc.save("output.pdf");
    });
  }

在这里，我遇到了内容中断的问题，如下图所示。

有没有办法解决这个问题？ 请帮我解决这个问题。

在这里您可以获得工作演示链接 - https://codesandbox.io/s/react-component-to-pdf-goe-page-cutting-3rnl29?file=/src/App.js:412-1697

这可以通过使用html2pdf / react-to-print吗？

可能会根据 API 数据添加值和图表。 这是一个动态组件

Answer 1

当然，只需从 styles.css 中的styles.css中删除顶部和底部填充

例如

.pdf {
  margin: 0;
  padding: 0 20px;
  max-width: 1000px;
}

结果