Question

当我导出pdf文件时，仅打印表格的一半，请在此帮助我，这是我的代码javascript，它会触发导出并查看页面。我应该在这里改变什么？谢谢高级

请在此处请参阅完整的html代码表请在此处请参阅完整的html代码表请在此处请参阅完整的html代码表请在此处请参阅完整的html代码表请在此处请参阅完整的html代码表请在此处请参阅完整的html代码表请在此处查看完整的html代码表在这里请参阅完整的html代码表在这里请参阅完整的html代码表在这里请参阅完整的html代码表在这里请参阅完整的html代码表在这里请参阅完整的html代码表在这里

      <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

检查此代码将起作用：

 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));
      }
        });
    }

HTML5和Bootstrap 4-导出PDF文件仅打印内容的一半

1 个答案: