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

Question

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

它有一个名为forceRenderTabPanel的属性。如果为true，则所有选项卡都将呈现到DOM中。

我使用jsPDF库将HTML(选项卡(导出为PDF
jspdf有一个名为.HTML()的方法，它将在其参数中使用HTML呈现器，我将在参数中使用父div。

正如你在这个例子中看到的：链接到我的代码沙盒

正如你在导出的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的要求，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循环使这些代码动态化，有什么建议吗？