HTML5 & Bootstrap 4 - Export PDF file prints half of the content only

Question

When i export the pdf file it only prints the half of the table only kindly help me with this please, here is my code javascript which triggers the exportation and viewing the page . what should i change here? thank you in advanced

please please see the full html code table hereplease see the full html code table hereplease see the full html code table hereplease see the full html code table hereplease see the full html code table hereplease see the full html code table hereplease see the full html code table hereplease see the full html code table hereplease see the full html code table hereplease see the full html code table hereplease see the full html code table heresee the full html code table here

      <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="0%" cellspacing="0" >
              <thead>
                <tr>
                  <th>Supplier Name</th>
                  <th>Item No.</th>
                  <th>Description</th>
                  <th>Category</th>
                  <th>Qty</th>
                  <th>Item Price</th>
                  <th>Total Price</th>
                  <th>Payment Type</th>
                  <th>Passenger Details</th>
                  <th>Airline Info</th>
                  <th>Flight Details</th>
                  <th>Date</th>
                  <th>Time</th>
                  <th>Route</th>
                  <th>Crew Name</th>
                </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>Pan Pac</td>
                      <td>0001</td>
                      <td>Solis Global Wifi</td>
                      <td>Featured Products</td>
                      <td>10</td>
                      <td>$159</td>
                      <td>$159</td>
                      <td>E-Wallet</td>
                      <td>June Condez</td>
                      <td>Pan Pacific Airlines</td>
                      <td>FLX0351</td>
                      <td>01/22/19</td>
                      <td>8:00:00</td>
                      <td>CRK - SIN</td>
                      <td>PPA Crew</td>
                    </tr>
                    <tr>
                      <td>PAL</td>
                      <td>0002</td>
                      <td>Solis Global Wifi</td>
                      <td>Featured Products</td>
                      <td>10</td>
                      <td>$159</td>
                      <td>$159</td>
                      <td>E-Wallet</td>
                      <td>Joyce Feliciano</td>
                      <td>Philippine Airlines</td>
                      <td>ARF0908</td>
                      <td>01/22/19</td>
                      <td>8:00:00</td>
                      <td>CRK - SIN</td>
                      <td>PAL Crew</td>
                    </tr>
                    <tr>
                        <td>Cebpac</td>
                        <td>0003</td>
                        <td>Solis Global Wifi</td>
                        <td>Featured Products</td>
                        <td>10</td>
                        <td>$159</td>
                        <td>$159</td>
                        <td>E-Wallet</td>
                        <td>Jeremy Santiago</td>
                        <td>Cebu Pacific Airlines</td>
                        <td>BFD1234</td>
                        <td>01/22/19</td>
                        <td>8:00:00</td>
                        <td>CRK - SIN</td>
                        <td>Ceb Crew</td>
                    </tr>
              </tbody>
            </table>


        <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
      </div>

 function Export() {
        html2canvas(document.getElementById('dataTable'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        margin: [ 10, 10, 10, 10 ],
                        width: 500,
                orientation:'landscape',
                customize: function (doc) { doc.defaultStyle.fontSize = 1;  doc.styles.tableHeader.fontSize = 1;  }

                    }]
                };
                pdfMake.createPdf(docDefinition).download("Pre-Order.pdf");
            }
        });
    }

Answer 1

Check this code it will work :

  function Export() { html2canvas(document.getElementById('dataTable'), { onrendered: function (canvas) { imgData = canvas.toDataURL('image/png'); imgData = imgData.split(',')[1]; console.log('Image Code', JSON.stringify(imgData)); } }); }