JSPDF / HTML2CANVAS 用.html方法渲染空白页面

Question

生成的 PDF 页面呈现空白。我尝试了很多方法和不同版本的依赖项。现在我觉得所有的希望都破灭了。

我需要文本可供选择，并且有一个包含文本和图像的现有样式模板，因此我需要使用 .html() 方法。让 JSPDF 决定分页符无法正常工作，并会导致跨浏览器和设备的高度间距问题。

请帮助我 Stackoverflow，你是我唯一的希望。

JSPDF版本2.5.1 HTML2CANVAS 版本 1.4.1

JS：

      function generatePDF() {

        var doc = new jsPDF({
          unit: 'mm',
          format: [210, 200],
          orientation: 'portrait'
        });

        var options = {
          html2canvas: {
            scale: 0.2
          },
          x: 0,
          y: 0,
          width: 210,
          windowWidth: 1000
        }

        // Loop through each div and add it to the PDF as a new page
        $('div[id^="page-"]').each(function() {
          var content = $(this)[0];
         
          // Add the content to the PDF as a new page
          doc.addPage();
          doc.html(content, options);
        });

        // Save the PDF
        doc.save('my-pdf');

      }

HTML 示例（为简单起见，省略了一些代码）：

<div id="page-1">Content for page 1</div>
<div id="page-2">Content for page 2</div>
<div id="page-3">Content for page 3</div>
<div id="page-4">Content for page 4</div>

Answer 1

感谢@Abdullah 和这个问题：jsPDF html 方法，使用 addPage 在生成的 PDF 中分割页面 ...

...我设法让它工作：

function generatePDF() {

    var doc = new jsPDF({
      unit: 'mm',
      format: [210, 297],
      orientation: 'portrait'
    });

    // Add first page
    doc.html($("#page-1")[0], {
      callback: function () {
        // Add second page
        doc.addPage();
        doc.html($("#page-2")[0], {
          callback: function () {
            // Add third page
            doc.addPage();
            doc.html($("#page-3")[0], {
              callback: function () {
                // Add fourth page
                doc.addPage();
                doc.html($("#page-4")[0], {
                  // Save the PDF
                  callback: function () {
                    doc.save('my-pdf');
                  },
                  html2canvas: { scale: 0.2 },
                  x: 0,
                  y: 891,
                  width: 210,
                  windowWidth: 1050
                });
              },
              html2canvas: { scale: 0.2 },
              x: 0,
              y: 594,
              width: 210,
              windowWidth: 1050
            });
          },
          html2canvas: { scale: 0.2 },
          x: 0,
          y: 297,
          width: 210,
          windowWidth: 1050
        });
      },
      html2canvas: { scale: 0.2 },
      x: 0,
      y: 0,
      width: 210,
      windowWidth: 1050
    });

  }

Answer 2

您的 HTML 中可能有 TABLE。 如果是，请将 TABLE 替换为 div，然后重试。

这就是问题所在。