JsPDF Autotable：如何并排显示跨越多个页面的两个表格？

Question

我正在尝试使用 Autotable 并排显示两个 table 的信息。当我没有那么多条目并且信息只需要一页时，它显示正常。但是，当我有大量数据和多个页面时，第二个 table 直到第一个 table 显示其大部分条目后才开始显示。

这里有一个 JsFiddle 示例数据来说明问题。我尝试更改第二个 table 的 y 位置，但它似乎只是将数据在它显示的页面上向上移动并切断数据的顶部，而不是将其移动到前面的页面。

function generatePdf() {
        header = ["Reason","Duration","Start time"];
    content = [
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"],
                ["Analyzer blowback","10h15m","08:04"]

                        ];

    var doc = new jsPDF('p', 'pt');
    doc.autoTable(header, content, {
        showHeader: 'firstPage',
        styles: { fontSize: 10 },
        avoidPageSplit: true,
        margin: { right: 305 }
    });

    doc.autoTable(header, content, {
        showHeader: 'firstPage',
        styles: { fontSize: 10 },
        avoidPageSplit: true,
        margin: { left: 305 }
        });

     doc.save("test.pdf")
}

generatePdf();

Answer 1

您必须在绘制表格之间手动设置页面。我用工作代码更新了你的fiddle，但基本上可以这样完成：

var startingPage = doc.internal.getCurrentPageInfo().pageNumber;
doc.autoTable({html: '#table', margin: {right: 305}});
doc.setPage(startingPage);
doc.autoTable({html: '#table', margin: {left: 305}});

同时检查 multiple tables example 以包含横跨多个表格的水平表格。

JsPDF Autotable：如何并排显示跨越多个页面的两个表格？

JsPDF Autotable: How do I display two tables side by side that span multiple pages?

javascript

jspdf

jspdf-autotable