如何使用Puppeteer将HTML内容分页面打印为PDF

要实现将指定HTML元素分别放在PDF的不同页面，核心是利用CSS分页属性配合Puppeteer的PDF生成功能，以下是两种可行方案：

方案一：直接在HTML中嵌入分页CSS #

修改HTML内容，添加控制分页的样式，确保每个目标元素从新页面开始：

const GENERATE_UUID = uuidv4();
const path = `test.pdf`;
const browser = await puppeteer.launch({
  headless: "new", // 推荐使用新版无头模式，稳定性更强
  args: ["--no-sandbox", "--disable-setuid-sandbox"] // 可选，解决部分环境的权限问题
});

const page = await browser.newPage();
// 嵌入分页CSS的HTML内容
const example_html = `
<style>
/* 给除第一个h1外的所有h1前强制分页 */
h1:not(:first-child) {
  page-break-before: always;
}
/* 避免h1内容被跨页截断 */
h1 {
  page-break-inside: avoid;
}
</style>
<h1>Heading 1 Page 1</h1>
<h1>Heading 2 Page 2</h1>
<h1>Heading 3 Page 3</h1>
`;
await page.setContent(example_html, { waitUntil: "domcontentloaded" });
await page.emulateMediaType("print"); // 切换到打印媒体类型，确保分页样式生效
await page.pdf({
  displayHeaderFooter: true,
  path: path,
  margin: {
    top: "140px",
    right: "10px",
    bottom: "100px",
    left: "10px",
  },
  format: "A4",
});
await browser.close();

方案二：通过Puppeteer注入CSS（不修改原始HTML） #

如果不想改动原始HTML，可以在页面加载完成后，通过addStyleTag注入分页样式：

const GENERATE_UUID = uuidv4();
const path = `test.pdf`;
const browser = await puppeteer.launch({
  headless: "new",
  args: ["--no-sandbox", "--disable-setuid-sandbox"]
});

const page = await browser.newPage();
const example_html = "<h1>Heading 1 Page 1</h1><h1>Heading 2 Page 2</h1><h1>Heading 3 Page 3</h1>";
await page.setContent(example_html, { waitUntil: "domcontentloaded" });

// 动态注入分页样式
await page.addStyleTag({
  content: `
    h1:not(:first-child) {
      page-break-before: always;
    }
    h1 {
      page-break-inside: avoid;
    }
  `
});

await page.emulateMediaType("print");
await page.pdf({
  displayHeaderFooter: true,
  path: path,
  margin: {
    top: "140px",
    right: "10px",
    bottom: "100px",
    left: "10px",
  },
  format: "A4",
});
await browser.close();

关键说明 #

• page-break-before: always：强制在目标元素前插入分页符，确保元素从新页面起始
• page-break-inside: avoid：防止元素内容被跨页截断，保证内容完整性
• emulateMediaType("print")：分页CSS仅在打印媒体类型下生效，必须切换到此模式才能让分页规则生效
• 新版headless: "new"是Puppeteer官方推荐的无头模式，相比旧版兼容性和稳定性更好

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