如何使用没有jquery的jsPDF ()方法使用.html()方法生成多页PDF

Question

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

它有一个名为forceRenderTabPanel的属性。虽然它是真的，但是所有的选项卡都将呈现到DOM中。

我使用jsPDF库将HTML(Tabs)导出为PDF格式。

jspdf有一个名为.HTML()的方法，它将在其参数中使用HTML，我在参数中给出了父div。

如您在本例中所看到的：链接到我的代码框

正如您在导出的PDF中所看到的，只有一个(Active Tab)正在导出，尽管所有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的技巧，U可以使用嵌套的回调函数，比如基于页面大小的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循环有什么建议吗？