jsPDF调用.html()方法生成PDF时分页图片被拆分，如何配置解决？

1. 给HTML模板添加CSS分页规则 #

直接在你传入的HTML字符串中插入样式，指定图片等元素不允许被分页拆分：

<style>
/* 禁止图片、表格行等元素跨页拆分 */
img, tr, .no-split {
  break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  /* 可根据你的PDF页面可打印高度调整最大高度，避免单张图超过一页 */
  max-height: 270mm;
}
</style>

break-inside: avoid 是CSS3标准分页属性，page-break-inside: avoid 用于兼容旧的分页规则，两个同时加覆盖更多场景。

2. 配置jsPDF的html方法分页参数 #

在原有调用参数中新增pagebreak配置项，开启自动避免元素拆分逻辑：

doc.html(templateToPrint, {
  callback (doc) {
    doc.save(`${(new Date().toLocaleTimeString())}.pdf`);
  },
  x: 15,
  y: 10,
  // 新增分页控制配置
  pagebreak: {
    mode: ['css', 'avoid-all'],
    // 填入所有需要避免被拆分的元素选择器
    avoid: ['img', 'tr', '.no-split']
  }
});

• mode 设为['css', 'avoid-all']会同时识别你写的CSS分页规则，以及自动检测元素边界避免拆分
• avoid 数组里可以自定义所有不想被跨页拆分的元素选择器，比如表格行、自定义模块等都可以加进去

异常排查 #

如果配置后还是出现拆分，可以检查两点：

• 你的jsPDF版本是否为2.0+，旧版本不支持pagebreak配置，升级到最新稳定版即可
• 图片本身高度是否超过了单页可打印区域（A4纸总高度297mm，减去你设置的上下边距就是可打印高度），如果图片本身超过单页高度，只能通过调整max-height压缩到单页内

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