Home » Jquery » javascript – How to print four Different Tables using jspdf-autotable

javascript – How to print four Different Tables using jspdf-autotable

Posted by: admin February 22, 2020 Leave a comment

Questions:

I want to print these two tables as pdf using jspdf autotable plugin. But the script that I wrote prints only the second table. I think the problem lies in writing script. Will someone guide me on how to print these two tables using jspdf-autotable. but I have a problem occur “Uncaught Type Error: Cannot read property ‘finalY’ of undefined” this error will display in the console. Here I will display 4 different tables width and height and I have printed a single pdf page. I have worked some of the code but not working properly.

 function generate() {
    var doc = new jsPDF('p', 'pt', 'A4');
    let finalY = doc.autoTable.previous.finalY;
    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.save("test.pdf");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script>          
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.1.0/jspdf.plugin.autotable.js"></script>
    
<div class="col-md-3">
  <table id="customers" class="table table-striped">
     <colgroup>
        <col width="60%">
        <col width="60%">
     </colgroup>
     <tbody>
        <tr style="background:#e5d56b;">
           <th>8 Gauge / 4.0MM</th>
           <th colspan="3">HOLE SIZE </th>
        </tr>
        <tr>
           <td>Height</td>
           <td style="background-color:#82ca2e;">2</td>
           <td style="background-color:#82ca2e;">3</td>
           <td style="background-color:#82ca2e;">4</td>
        </tr>
        <tr>
           <td>3 Feet</td>
           <td style="background-color:#82ca2e;">65</td>
           <td style="background-color:#82ca2e;">44</td>
           <td style="background-color:#82ca2e;">30</td>
        </tr>
        <tr>
           <td>4 Feet</td>
           <td style="background-color:#82ca2e;">86</td>
           <td style="background-color:#82ca2e;">58</td>
           <td style="background-color:#82ca2e;">40</td>
        </tr>
        <tr>
           <td>5 Feet</td>
           <td style="background-color:#82ca2e;">108</td>
           <td style="background-color:#82ca2e;">73</td>
           <td style="background-color:#82ca2e;">50</td>
        </tr>
        <tr>
           <td>6 Feet</td>
           <td style="background-color:#82ca2e;">129</td>
           <td style="background-color:#82ca2e;">87</td>
           <td style="background-color:#82ca2e;">60</td>
        </tr>
     </tbody>
  </table>
</div>
<div class="col-md-3">
  <table id="customers1" class="table table-striped">
     <colgroup>
        <col width="60%">
        <col width="60%">
     </colgroup>
     <tbody>
        <tr style="background:#e5d56b;">
           <th>10 Gauge / 3.0MM</th>
           <th colspan="3">HOLE SIZE </th>
        </tr>
        <tr>
           <td>Height</td>
           <td style="background-color:#82ca2e;">2</td>
           <td style="background-color:#82ca2e;">3</td>
           <td style="background-color:#82ca2e;">4</td>
        </tr>
        <tr>
           <td>3 Feet</td>
           <td style="background-color:#82ca2e;">36</td>
           <td style="background-color:#82ca2e;">23</td>
           <td style="background-color:#82ca2e;">19 </td>
        </tr>
        <tr>
           <td>4 Feet</td>
           <td style="background-color:#82ca2e;">48</td>
           <td style="background-color:#82ca2e;">30</td>
           <td style="background-color:#82ca2e;">25</td>
        </tr>
        <tr>
           <td>5 Feet</td>
           <td style="background-color:#82ca2e;">60</td>
           <td style="background-color:#82ca2e;">38</td>
           <td style="background-color:#82ca2e;">31</td>
        </tr>
        <tr>
           <td>6 Feet</td>
           <td style="background-color:#82ca2e;">72</td>
           <td style="background-color:#82ca2e;">45</td>
           <td style="background-color:#82ca2e;">38 </td>
        </tr>
     </tbody>
  </table>
</div>
<button onclick="javascript:demoFromHTML();" style="float:right;" class="btn btn-primary">Download PDF</button>
How to&Answer: