如何解决Puppeteer生成PDF时的表格分页断裂问题

使用Node.js结合Puppeteer生成PDF时，表格在分页处被截断的问题，可通过以下几种方案解决：

方案1：用CSS禁止表格内部分页 #

通过page-break-inside属性告诉浏览器避免在表格、行或单元格内部插入分页符，确保内容完整性。修改你的addStyleTag代码：

await page.addStyleTag({
  content: `
    @page {
      margin-bottom: 0;
    }
    .date-time,.pageNumber,.title{
      display: none !important;
    }
    /* 新增表格分页控制规则 */
    table { page-break-inside: avoid; }
    tr { page-break-inside: avoid; page-break-after: auto; }
    td, th { page-break-inside: avoid; }
  `,
});

方案2：调整页面边距适配表格高度 #

如果表格内容过长，可通过计算页面可用高度，限制表格的最大显示高度，避免跨页截断。比如结合你设置的上下边距，给表格添加样式：

table {
  max-height: calc(100vh - 280px); /* 180px上边距 + 100px下边距，按需调整 */
  overflow: hidden;
}

同时可根据实际情况微调page.pdf中的margin参数，平衡内容显示空间。

方案3：使用新版无头模式优化渲染 #

你的代码中headless: false与args: ["--headless"]存在冲突，建议启用Puppeteer的新版无头模式，它对打印分页的逻辑支持更完善：

const browser = await puppeteer.launch({
  headless: "new", // 启用新版无头模式
});

方案4：主动控制分页位置（按需使用） #

如果需要自定义分页点，可在表格的指定位置插入分页标记元素：

<div class="force-page-break"></div>

然后添加对应的CSS规则：

.force-page-break {
  page-break-after: always;
}

这样就能强制在该位置分页，避免表格被意外截断。

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