如何在不使用jquery的情况下使用.html()方法使用jsPDF生成多页PDF

Question

我有一个特定的功能，我必须将所有选项卡导出到 PDF 中，每个选项卡位于单独的页面中。对于选项卡，我使用了react-tabs（https://www.npmjs.com/package/react-tabs）。

它有一个属性，称为

forceRenderTabPanel

。虽然这是真的，但所有选项卡都将渲染到 DOM 中。

我使用了 jsPDF 库将 HTML（选项卡）导出为 PDF。
jspdf 有一种名为

.HTML()

的方法，它将在其参数中采用 HTML 渲染器，我将父 div 放入参数中。

正如您在此示例中所看到的：链接到我的codesandbox

正如您在导出的 PDF 中看到的那样，只有一个（活动选项卡）正在导出，即使所有 3 个选项卡都已渲染到 Dom 中，我正在寻找的是每个选项卡都应在单独的页面中导出。

如何使用 jspdf 的 .HTML() 方法或任何其他使用外部文件中的 CSS 的方法从 HTML 制作多页 PDF？或者 如何在 .html() 方法的回调中添加多页 我们可以使用其他库或方法来执行这些任务吗？任何建议将不胜感激！！！

const doc = new jsPDF("p", "pt", "a4");    
doc.html(document.getElementById("Page1"), {
       callback: function (pdf) {
         pdf.addPage(
           [1500, 1500],
           "l"
         );
         pdf.html(document.getElementById("Page2"), {
           callback: function (pdf2) {
             pdf2.addPage(
               [1500, 1500],
               "l"
             );
             pdf2.html(document.getElementById("Page3"), {
               callback: function (pdf3) {
                 pdf3.save("3pageFS.pdf");
               },
               y: 1500,
             });
           },
         });
       },

我尝试过使用这种方式，但我得到了第二和第三个空白页，只有第一页可见！

Answer 1

我发现了一种技巧对于我使用 .HTML() 方法导出多页 PDF 的要求，你可以使用像这样的嵌套回调函数并根据页面大小给出 X 和 Y 坐标

   const doc = new jsPDF("p", "pt", "a4");   
   doc.html(document.getElementById("Page1"), {
      callback: function (pdf) {
        pdf.addPage("a4", "l");
        pdf.html(document.getElementById("Page2"), {
          callback: function (pdf2) {
            pdf2.addPage("a4", "l");
            pdf2.html(document.getElementById("Page3"), {
              callback: function (pdf3) {
                pdf3.save("multipage.pdf")
              },
              x: 0,
              y: 2 * pageHeight,
            });
          },
          x: 0,
          y: pageHeight,
        });
      },
      x: 0,
      y: 0,
    });

关于如何根据页数使用 for 循环使这些代码动态化有什么建议吗？

Answer 2

接受的答案工作得很好，但正如前面提到的，在尝试循环页面时不是很灵活。 我改变了这种方法，使用了非常有效的 Promise：

    const pdfDoc = new jsPDF({ format: [585, 842] });
    const htmlPages = document.getElementById("pages")!.children;
    for (let i = 0; i < htmlPages.length; i++) {
      const htmlPage = htmlPages[i] as HTMLElement;
      await new Promise((resolve) => {
        pdfDoc.html(htmlPage as HTMLElement, { callback: resolve, y: 842 * i });
      });
      if (i < htmlPages.length - 1) {
        pdfDoc.addPage([585, 842]);
      }
    }