jsPDF / AutoTable生成的PDF重疊頁面寬度

Question

我正在嘗試從一個大而長的HTML表中生成一個PDF，該表具有多個列，這些列將所有列的文本包裹起來以適合頁面寬度。 我知道我做錯了，因為最終的PDF重疊了頁面寬度並且沒有在新行中破壞列文本。

有人能幫我嗎？

這是我的代碼：

 $("#btnPDF").click(function(){ var doc = new jsPDF('l'); var elem = $("#basicTable")[0]; var res = doc.autoTableHtmlToJson(elem); doc.autoTable(res.columns, res.data, { startY: 21, margin: {horizontal: 14}, bodyStyles: {valign: 'top'}, styles: {overflow: 'linebreak', columnWidth: 'wrap'}, columnStyles: {} }); doc.save('table.pdf'); }); 

 <table id="basicTable"> <thead> <tr> <th>iD</th> <th>Client</th> <th>Name</th> <th>Address</th> <th>ZIPCode</th> <th>City</th> <th>State</th> <th>Country</th> <th>Contact1</th> <th>Phone1</th> <th>eMail1</th> <th>Contact2</th> <th>Phone2</th> <th>eMail2</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Antonio</td> <td>ANTONIO EN LA DIRECCION2</td> <td>DIRECCION2</td> <td>CP</td> <td>CIUDAD</td> <td>PROVINCIA</td> <td>PAIS</td> <td>Antonio el del nombre más largo del mundo</td> <td>+34666666666666</td> <td>antonio@elcorreomaslargo.com</td> <td>Antonio José el del nombre más largo del mundo</td> <td>+34666666666666</td> <td>antonio@elcorreomaslargo.com</td> </tr> </tbody> </table> <button type="button" id="btnPDF"> Generate PDF </button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.js"></script> 

JSFiddle

非常感謝你的幫助！

Answer 1

我有一個解決您的問題的方法。 它不漂亮，但我一直在使用它。

您可以創建幾個具有一個長表內容的新表。 就像這樣：

<table id="basicTablePart1">
  <thead>
    <tr>
      <th>iD</th>
      <th>Client</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Antonio</td>
      <td>ANTONIO EN LA DIRECCION2</td>
    </tr>
  </tbody>
</table>

<table id="basicTablePart2">
  <thead>
    <tr>
      <th>Address</th>
      <th>ZIPCode</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>DIRECCION2</td>
      <td>CP</td>
      <td>CIUDAD</td>
    </tr>
  </tbody>
</table>

讓我知道是否有人找到了更智能的解決方案！