本文介绍如何通过 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（如仅

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

...

）可能导致样式失效。应提供包含 ... 的完整结构，确保

Heading 1 Page 1

This is content for page 1.

Heading 2 Page 2

This is content for page 2.

Heading 3 Page 3

This is content for page 3.

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！