本文介绍如何通过 CSS 分页控制（如 break-before: page）配合 Puppeteer 的 emulateMediaType('print')，精准实现 HTML 中指定元素独占 PDF 页面，解决多章节报告分页生成难题。
本文介绍如何通过 css 分页控制（如 `break-before: page`）配合 puppeteer 的 `emulatemediatype('print')`，精准实现 html 中指定元素独占 pdf 页面，解决多章节报告分页生成难题。
在使用 Puppeteer 生成 PDF 报告时，若需将 HTML 中不同区块（如章节标题、报表模块）强制分页显示（即每个
或 单独占据一页），不能依赖默认渲染行为——必须借助 CSS 分页属性，并确保 Puppeteer 正确模拟打印上下文。核心要点如下：
✅ 使用标准 CSS 分页属性：推荐使用现代 CSS 属性 break-before: page（或 break-after: page），它在 @media print 中被 Chromium（Puppeteer 底层引擎）良好支持。避免使用已废弃的 page-break-before（虽向后兼容，但不推荐新项目使用）。
✅ 必须启用 emulateMediaType('print')：Puppeteer 默认以 screen 模式渲染，而分页样式仅在 print 媒体查询下生效。调用 page.emulateMediaType("print") 是强制触发分页逻辑的关键步骤。
立即学习“前端免费学习笔记（深入）”；
✅ HTML 结构需包裹在完整文档中：直接传入碎片 HTML（如仅
...
）可能导致样式失效。应提供包含 ... 的完整结构，确保
核心要点如下：
✅ 使用标准 CSS 分页属性：推荐使用现代 CSS 属性 break-before: page（或 break-after: page），它在 @media print 中被 Chromium（Puppeteer 底层引擎）良好支持。避免使用已废弃的 page-break-before（虽向后兼容，但不推荐新项目使用）。
✅ 必须启用 emulateMediaType('print')：Puppeteer 默认以 screen 模式渲染，而分页样式仅在 print 媒体查询下生效。调用 page.emulateMediaType("print") 是强制触发分页逻辑的关键步骤。
立即学习“前端免费学习笔记（深入）”；
✅ HTML 结构需包裹在完整文档中：直接传入碎片 HTML（如仅
