如何修復 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;
}

結果