How to print four Different Tables using jspdf-autotable

Question

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>

Answer 1

First of All you can change the script here once check this script it will work

<script type="text/javascript">
   document.getElementById('downloadbtn').addEventListener('click',
     exportPDF);

   var specialElementHandlers = {
     // element with id of "bypass" - jQuery style selector
     '.no-export': function(element, renderer) {
       // true = "handled elsewhere, bypass text extraction"
       return true;
     }
   };

   function exportPDF() {

     var pdf = new jsPDF('p', 'pt', 'a4');
     var img = new Image;
      pdf.text('Recommended Consumer Price list Month : <?php echo date('F Y'); ?>', 150,31);
      pdf.text('Customer Care : 9010316786', 150,51);
      pdf.text('email us : [email protected]', 150,71);
      pdf.text('Website : www.karimullagroup.com', 150,91);


   var source = document.getElementById('canvas').innerHTML;

   margins = {
          top: 80,
          bottom: 60,
          left: 50,
          width: 322
      };
      // all coords and widths are in jsPDF instance's declared units
      // 'inches' in this case
      pdf.fromHTML(
      source, // HTML string or DOM elem ref.
      margins.left, // x coord
      margins.top, { // y coord
          'width': margins.width, // max width of content on PDF
          'elementHandlers': specialElementHandlers
      },

      function (dispose) {
          // dispose: object with X, Y of the last line add to the PDF 
          //          this allow the insertion of new lines after html
          img.onload = function() {
          pdf.addImage(this, 40, 10, 90, 70);
          pdf.save('starfence.pdf');
      } },margins);
          img.crossOrigin = "";  
          img.src = "images/Starfence.png";
      }

</script>