Javascript 如何使用jspdf自动表格打印两个不同的表格

我想使用jspdf自动表格插件将这两个表格打印为pdf。但我写的脚本只打印第二个表。我认为问题在于写剧本。有人能告诉我如何使用jspdf自动表格打印这两个表格吗

        <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>

打印
身份证件
名称
地址
标志
01
约翰逊
英国
112
02
吉姆
美国
142
03
约翰逊
英国
112
04
吉姆
美国
142
名字
姓
电话
评论
朱莉娅
安德森
2312144
好
艾玛
沃森
24564456
杰出的
吉姆
携带
5645648
Seperb
骚扰
陶工
544562310
荒唐的

以下是脚本：

<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>

函数生成（）{
var doc=新的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”）；
}

第二张表很可能打印在第一张表的顶部。必须指定第二个表的起始位置，如下所示：

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

---

如果使用DOC.AutoTable HTMLtoJSON不考虑头和重复一行。 这对我来说很有用：

generate（）{
const doc=new jsPDF（）
自动表格({
主题:"平原",，
头型：{fontSize:10}，
bodyStyles:{fontSize:8，fontStyle:'italic'}，
标题：[[ID]、“姓名”、“国家]]，
正文：['1'，'Simon'，'Sweden'，'2'，'Karl'，'Norway']，
});
自动表格({
主题:"平原",，
头型：{fontSize:10}，
bodyStyles:{fontSize:8，fontStyle:'italic'}，
标题：[[ID]、“姓名”、“国家]]，
正文：[[1]、[Simon]、[Swedenddd]、[2]、[Karl]、[Norway]，
});
//doc.save（'table.pdf'）；
doc.output（'dataurlnewwindow'）；//检查pdf生成
}

最新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')

---

仅将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>

函数生成（）{
var doc=新的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，起始：doc.lastAutoTable.finalY+20，{margin:{top:80}）；
doc.save（“test.pdf”）；
}

非常感谢，伙计。。。！！你解决了我的一个大问题。我被困在这里两天了。当表2不止一页时，我能为每一页重复表1吗-Simon Bengtsson您需要与jspdf一起添加。示例-从“jsPDF”导入jsPDF；导入“jspdf自动表”；