javascript - JsPDF 自动表 : How do I display two tables side by side that span multiple pages?

Question

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

这是一个 JsFiddle用样本数据来说明问题。我尝试更改第二个表格的 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包括跨多个表的水平表。