javascript - 使用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 导出在代码段中不起作用，因此创建了一个 fiddle here .您会在 pdf 中观察到一些文本是从中间切掉的。我想阻止这种情况。如果内容变得大于 a4 大小，则内容应仅按整个元素拆分。

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

Answer 1

根据 documentation ，您需要添加选项 autoPaging:'text'，“尝试不跨分页符将文本切成两半。”

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