如何使用jspdf将HTML转换为PDF时避免内容被截断

Question

我正在创建一个报表查看器，它有一个导出报表的选项。 报表可以包含动态内容和具有不同行数的动态表格。

const doc = new jspdf.jsPDF("portrait", "px", [3508, 2480]);
document.querySelector('button').onclick = () => {
  doc.html(document.body, {
    x: 0,
    y: 0,
    margin: [700, 0, 700, 0],
    callback: () => {
       doc.save();
    },
  });
}

*{font-size: 100px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
      <script
         src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
         integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
         crossorigin="anonymous"
         referrerpolicy="no-referrer"
      ></script>
<button>Export as pdf</button>
<table>
  <thead>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
    <th>Heading 4</th>
  </thead>
  <tbody>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
  </tbody>
</table>

在这个代码片段中，PDF导出无法正常工作，所以我创建了一个演示示例。您会发现在 PDF 中有些文字被从中间分割了。我想要防止这种情况。如果内容增长超过A4纸大小，则应只按整个元素拆分内容。

实际上，我正在使用React生成一些复杂的报告，请提供一些通用解决方案。

- Maheer Ali

Answer 1

根据文档，您需要添加选项autoPaging:'text'，它会“尝试避免在分页时将文本分成两部分”。

doc.html(document.body, {
  x: 0,
  y: 0,
  autoPaging: 'text',
  margin: [700, 0, 700, 0],
  callback: () => {
     doc.save();
  },
});

- Besworks

---

对我没有用。 - Mickael Bergeron Néron