使用jsPDF将HTML转PDF时的分页截断问题求助

问题根源 #

你当前的手动分页逻辑本质是重复渲染整个模板，没有真正拆分内容，导致表格跨页截断、后续页面边距失效。

解决方案 #

放弃手动计算高度的分页方式，利用jsPDF内置的自动分页配置+CSS分页规则来实现需求：

1. 启用jsPDF自动分页
   配置autoPaging: 'avoid'，让jsPDF自动检测内容高度并新建页面，同时尽量避免在元素（如表格行）中间截断。

2. 统一设置全局边距
   要么在jsPDF初始化时设置全局边距，要么用CSS的@page规则定义每页边距，确保所有页面生效。

3. 添加CSS防截断规则
   给表格、简历区块等元素添加page-break-inside: avoid，强制避免元素内部被分页拆分。

修改后的代码示例 #

jsPDF部分

// 初始化jsPDF时设置全局边距（单位统一用mm或px，这里用mm示例）
const doc = new jsPDF({
  orientation: 'portrait',
  unit: 'mm',
  format: 'a4',
  // 上、左、下、右边距，对应你的marginTop/marginLeft等变量
  margin: [20, 15, 20, 15]
});

doc.html(reportTemplateRef.current, {
  html2canvas: {
    scale: scale,
    // 确保渲染时识别CSS分页规则
    logging: false
  },
  autoPaging: 'avoid', // 关键配置：自动分页+避免元素截断
  callback: () => {
    doc.save('简历模板.pdf');
  }
});

CSS样式部分（添加到你的React组件样式中）

/* 全局每页边距，和jsPDF初始化的边距保持一致 */
@page {
  margin: 20mm 15mm;
}

/* 避免表格、简历区块被跨页截断 */
.resume-table, .resume-section {
  page-break-inside: avoid;
  page-break-after: auto;
}

额外排查点 #

• 确保reportTemplateRef.current对应的DOM内容已经完全渲染（比如动态加载的内容要等待渲染完成再调用导出）
• scale值不要设置过大，避免html2canvas渲染异常
• 如果使用自定义字体，要确保字体已正确加载到jsPDF中

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