如何使用 jspdf-autotable 打印两个不同的表格答案

【问题标题】：How to print two Different Tables using jspdf-autotable如何使用 jspdf-autotable 打印两个不同的表格
【发布时间】：2016-11-06 11:44:27
【问题描述】：

我想使用 jspdf autotable 插件将这两个表打印为 pdf。但是我写的脚本只打印第二张表。我认为问题在于编写脚本。有人指导我如何使用 jspdf-autotable 打印这两个表格。

        <button onclick="generate()">Print</button>

<table id="tbl1" border="2">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Marks</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>01</td>
                    <td>Johnson</td>
                    <td>UK</td>
                    <td>112</td>
                </tr>
                <tr>
                    <td>02</td>
                    <td>Jim</td>
                    <td>US</td>
                    <td>142</td>
                </tr>
                <tr>
                    <td>03</td>
                    <td>Johnson</td>
                    <td>UK</td>
                    <td>112</td>
                </tr>
                <tr>
                    <td>04</td>
                    <td>Jim</td>
                    <td>US</td>
                    <td>142</td>
                </tr>
            </tbody>
        </table>
        <table id="tbl2" border="2">
            <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Phone</th>
                <th>Remarks</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Julia</td>
                <td>Anderson</td>
                <td>2312144</td>
                <td>Good</td>
            </tr>
            <tr>
                <td>Emma</td>
                <td>Watson</td>
                <td>24564456</td>
                <td>Excellent</td>
            </tr>
            <tr>
                <td>Jim</td>
                <td>Carry</td>
                <td>5645648</td>
                <td>Seperb</td>
            </tr>
            <tr>
                <td>Harry</td>
                <td>Potter</td>
                <td>544562310</td>
                <td>Ridiculous</td>
            </tr>
            </tbody>
        </table>

这是脚本：

<script>
    function generate() {
        var doc = new jsPDF('p', 'pt', 'A4');

        var res = doc.autoTableHtmlToJson(document.getElementById("tbl1"), true);
        doc.autoTable(res.columns, res.data, {margin: {top: 80}});

        var res2 = doc.autoTableHtmlToJson(document.getElementById("tbl2"), true);
        doc.autoTable(res2.columns, res2.data, {margin: {top: 80}});

        doc.save("test.pdf");

    }
</script>

【问题讨论】：

标签： javascript jquery jspdf jspdf-autotable

【解决方案1】：

第二个表格很可能印在第一个表格之上。您必须像这样指定第二个表的开始位置：

var res = doc.autoTableHtmlToJson(document.getElementById('tbl1'));
doc.autoTable(res.columns, res.data);
var res2 = doc.autoTableHtmlToJson(document.getElementById('tbl2'));
doc.autoTable(res2.columns, res2.data, {
    startY: doc.lastAutoTable.finalY + 50
});

【讨论】：

非常感谢伙计...！！你解决了我的一个大问题。我被困在这里两天了。
当表 2 超过一页时，我可以为每一页重复表一吗？ -西蒙·本特松

【解决方案2】：

最新jspdf版本示例

var doc = new jsPDF("landscape");
var header = function () {
                doc.setFontSize(14);
                doc.setTextColor(40);
                doc.setFontStyle('bold');
                doc.text("Article", 15, 10);
              
};
    doc.autoTable({html:"#table1", didDrawPage: header});

    doc.autoTable({html:"#table2", didDrawPage: header});

    doc.autoTable({html:"#table3", didDrawPage: header});

    doc.autoTable({html:"#table4", didDrawPage: header});

    doc.autoTable({html:"#table5", didDrawPage: header});
    doc.save('myPDF.pdf')

【讨论】：

您需要在 jspdf 中添加 jspdf-autotable。示例 - 从“jspdf”导入 jsPDF；导入'jspdf-autotable';

【解决方案3】：

如果您使用 doc.autoTableHtmlToJson 不考虑头部并重复一行。这对我有用：

generate(){
    const doc = new jsPDF()

    doc.autoTable({
      theme: 'plain',      
      headStyles: { fontSize: 10 },
      bodyStyles: { fontSize: 8, fontStyle: 'italic' },      

      head:  [['ID', 'Name', 'Country']],
      body: [['1', 'Simon', 'Sweden'], ['2', 'Karl', 'Norway']],          

    });

    doc.autoTable({
      theme: 'plain',      
      headStyles: { fontSize: 10 },
      bodyStyles: { fontSize: 8, fontStyle: 'italic' },      

      head:  [['ID', 'Name', 'Country']],
      body: [['1', 'Simon', 'Swedenddd'], ['2', 'Karl', 'Norway']],          

    });

    // doc.save('table.pdf');  
    doc.output('dataurlnewwindow'); //to check pdf generate
}

【讨论】：

【解决方案4】：

只将 startY 添加到第二个表

 <script>
  function generate() {
    var doc = new jsPDF('p', 'pt', 'A4');

    var res = doc.autoTableHtmlToJson(document.getElementById("tbl1"), true);
    doc.autoTable(res.columns, res.data, {margin: {top: 80}});

    var res2 = doc.autoTableHtmlToJson(document.getElementById("tbl2"), true);
    doc.autoTable(res2.columns, res2.data, startY: doc.lastAutoTable.finalY + 20, {margin: {top: 80}});

    doc.save("test.pdf");
}
</script>

【讨论】：