解决Puppeteer生成PDF时表格跨页拆分问题

以下是几个经过验证的有效方案，可解决你遇到的表格跨页拆分问题：

1. 强化CSS分页规则（提升优先级+补充配套属性） #

单纯设置page-break-inside: avoid可能因优先级不足或缺少配套属性失效，试试以下完整CSS规则：

/* 给表格本身添加防分页规则 */
table {
  page-break-inside: avoid !important;
  table-layout: fixed; /* 固定表格布局，避免内容拉伸导致分页判断异常 */
  width: 100%; /* 确保表格占满可用宽度 */
  border-collapse: collapse; /* 合并边框，减少额外高度干扰 */
}

/* 针对tbody和tr设置防分页 */
tbody {
  page-break-inside: avoid !important;
}
tbody tr {
  page-break-inside: avoid !important;
}

/* 可选：如果需要表头在每页重复显示 */
thead {
  display: table-header-group;
}

将上述CSS嵌入你的HTML模板的<style>标签内，确保样式能正确作用到表格元素。

2. 调整Puppeteer的PDF生成配置 #

部分情况下，PDF导出的默认配置会干扰CSS分页规则，尝试添加以下选项：

await page.pdf({
  path: 'your-output.pdf',
  format: 'A4',
  printBackground: true, /* 确保背景样式（包括分页规则）生效 */
  preferCSSPageSize: true, /* 优先使用CSS定义的页面大小，而非默认值 */
  margin: { /* 合理设置页边距，避免内容挤到分页边界 */
    top: '1cm',
    right: '1cm',
    bottom: '1cm',
    left: '1cm'
  }
});

3. 更新Puppeteer到最新版本 #

旧版本的Puppeteer依赖的Chromium内核对CSS分页属性的支持存在bug，执行以下命令更新：

npm install puppeteer@latest

4. 极端情况：手动控制表格分页 #

如果表格内容远超单页容量，且必须避免跨页拆分，可以通过JavaScript在渲染前计算表格高度，将过长的表格拆分为多个独立表格，每个表格单独占一页：

// 在页面上下文执行，判断表格高度并拆分
await page.evaluate(() => {
  const table = document.querySelector('table');
  const pageHeight = window.innerHeight; // 单页可用高度
  const rows = Array.from(table.querySelectorAll('tbody tr'));
  let currentTable = table.cloneNode(false);
  let currentTbody = document.createElement('tbody');
  currentTable.appendChild(currentTbody);
  let currentHeight = 0;

  rows.forEach(row => {
    const rowHeight = row.offsetHeight;
    if (currentHeight + rowHeight > pageHeight) {
      // 当前表格已满，插入新表格
      table.parentNode.insertBefore(currentTable, table);
      currentTable = table.cloneNode(false);
      currentTbody = document.createElement('tbody');
      currentTable.appendChild(currentTbody);
      currentHeight = 0;
    }
    currentTbody.appendChild(row.cloneNode(true));
    currentHeight += rowHeight;
  });
  // 替换原表格
  table.parentNode.replaceChild(currentTable, table);
});

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