Как распечатать две разные таблицы, используя jspdf-autotable

Question

Я хочу напечатать эти две таблицы в формате pdf с помощью jtpdf-автозапускаемого плагина. Но скрипт, который я написал, печатает только вторую таблицу. Я думаю, что проблема заключается в написании сценария. Кто-нибудь подскажет мне, как печатать эти две таблицы, используя 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 
});