HTML转PDF：Handlebars+Puppeteer容器内容溢出自动分页方案咨询

该需求完全可以实现，以下提供两种可落地的实现方案，你可以根据业务场景选择：

方案1：CSS原生分页方案（优先推荐，实现成本最低） #

不需要修改过多现有逻辑，利用CSS分页媒体属性配合Puppeteer配置即可实现：

• 调整现有CSS样式，新增分页适配规则：

/* 全局打印适配 */
@page {
  size: A4;
  margin: 0;
}

.body_container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 19.334cm; /* 固定每页容器高度 */
  border: 0.25px solid #b8b8b8;
  font-size: 14px;
  box-sizing: border-box; /* 避免边框高度计算误差 */
  page-break-inside: avoid; /* 禁止容器被分页切断 */
  page-break-after: always; /* 每个容器结束后强制分页 */
}

/* 给容器内的动态内容块添加该规则，避免单个内容块被切割到两页 */
.body_container > .content-item {
  page-break-inside: avoid;
}

• 调整Puppeteer生成PDF的配置，确保适配打印样式：

await page.pdf({
  format: 'A4',
  printBackground: true, // 开启背景、边框打印
  preferCSSPageSize: true, // 优先使用CSS定义的页面尺寸
  margin: {
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
  }
})

你只需要把所有动态内容按顺序放入第一个.body_container即可，生成PDF时会自动按高度切割内容，溢出部分会自动适配到新的页面容器中。

方案2：JS动态切割内容方案（适合需要精确控制分页的场景） #

如果对分页位置有精确要求，CSS方案无法满足时，可以通过JS动态计算内容高度，手动分割容器：

• 先在Handlebars模板中新增一个无高度限制的隐藏临时容器，将所有动态内容先渲染到该容器中
• 编写JS逻辑计算临时容器内每个内容块的高度，累加高度值，当累计高度超过19.334cm（换算为px约为731px，可根据实际测试调整）时，将之前的内容拆分到一个新的.body_container中，剩余内容继续累加计算，直到所有内容处理完成
• 将所有生成的.body_container插入到页面body中即可，配合你原有的分页标签即可实现自动分页效果。

注意事项 #

• 高度换算时注意DPI适配，1cm约等于37.8px，可根据实际打印效果调整容器高度阈值
• 若内容包含图片、异步加载资源，必须等所有资源加载完成后再计算高度或生成PDF，避免高度计算错误
• 调试阶段可直接用浏览器打印预览功能查看效果，确认没问题后再用Puppeteer生成，提升调试效率

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