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>[phone]</td>
      <td>[email protected]</td>
      <td>Antonio José el del nombre más largo del mundo</td>
      <td>[phone]</td>
      <td>[email protected]</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>

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