如何使用jsPDF避免表格数据在两页间拆分？

以下是几个实用的解决办法，按优先级推荐：

1. 使用CSS page-break-inside: avoid 强制表格不跨页 #

这是最直接有效的方案，jsPDF的html()方法会解析HTML中的CSS样式，给表格或表格行添加禁止跨页的规则即可：

• 给整个表格添加样式：

<table style="page-break-inside: avoid;">
  <!-- 你的表格内容 -->
</table>

• 如果单页放不下整个表格，也可以给表格的行添加规则（避免某一行被拆分）：

<tr style="page-break-inside: avoid;">
  <!-- 行内容 -->
</tr>

如果是通过CSS类管理样式，直接在类中定义：

.no-page-break {
  page-break-inside: avoid;
}

然后给表格或行加上class="no-page-break"。

2. 调整jsPDF的分页配置 #

在doc.html()的配置选项中，添加分页相关参数，指定分页模式为基于文本的分页，可能会优化表格的分页行为：

let doc = new jsPDF("p", "pt", "a4");

doc.html(renderToString(<HTMLTemplate />), {
  margin: [20, 0, 20, 0],
  autoPaging: 'text', // 启用文本优先的分页逻辑
  async callback(doc) {
    doc.save(name_pdf_file, { returnPromise: true }).then(SetValue());
  },
});

3. 手动控制分页（复杂场景） #

如果上述方法都不生效，可尝试手动检测表格高度，在合适的位置插入分页符：

• 先计算表格内容的高度，结合PDF页面的可用高度（A4纸高度减去上下边距）
• 当表格剩余内容超过页面可用高度时，调用doc.addPage()插入新页，再渲染剩余的表格部分

不过这种方法需要额外处理HTML的拆分逻辑，适合表格结构固定、长度可预测的场景。

内容的提问来源于stack exchange，提问作者Geralt