JsPDF Autotable:如何并排显示跨越多页的两个表?

问题描述

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

I'm trying to use Autotable to display information for two tables side by side. When I don't have that many entries and the information only needs one page, it displays fine. However, when I have a lot of data and multiple pages, the second table doesn't start displaying until the first table has displayed most of its entries.

这是一个 JsFiddle ，其中带有示例数据来说明此问题.我尝试更改第二个表格的y位置，但似乎只是将数据在其显示的页面上向上移动，并切断了数据的顶部，而不是将其移至上一页.

Here's a JsFiddle with sample data to illustrate the problem. I tried changing the y-position of the second table, but it just seems to move the data up on the page it's displaying and cuts off the top of the data rather than moving it onto the previous pages.

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();

推荐答案

您必须在绘制表格之间手动设置页面.我使用工作代码更新了小提琴，但基本上可以这样完成:

You have to manually set the page between drawing the tables. I updated your fiddle with working code, but it basically can be done like this:

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

还要签出多个表示例包括跨越多个表的水平表.

Also checkout the multiple tables example to include horizontal tables that spans multiple tables.

这篇关于JsPDF Autotable:如何并排显示跨越多页的两个表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！