首页 > 解决方案 > JsPDf html2canvas html to image to pdf 拆分页面

问题描述

我怎样才能解决这个问题 ?我看到第一页的文字只有一半,第二页的另一半。

我的代码在这里:

generatePdf = () => {
    window.html2canvas = html2canvas;

    const input = document.getElementById("forTestPdf1");
    html2canvas(input).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 = 10; // give some top padding to first page 

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


      while (heightLeft >= 0) {
        position += heightLeft - imgHeight ; // top padding for other pages
        doc.addPage();
        doc.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }
      doc.save("file.pdf");
    });
  };

我怎么能禁用这个。

标签: javascriptreactjsjspdf

解决方案


推荐阅读