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>

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