如何使用jspdf-autotable打印兩個不同的表格

Question

我想用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> 

Answer 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.autoTableEndPosY() + 50 
});