如何在Puppeteer中移除PDF的about:blank与日期时间信息

你遇到的问题是因为开启了displayHeaderFooter: true但未自定义页眉页脚模板，Puppeteer默认会在页眉显示当前页面的URL（这里因为用setContent加载内容，页面URL是about:blank），页脚显示日期时间。

解决方案 #

在page.pdf()的配置参数中，添加自定义的headerTemplate和footerTemplate，通过空模板可以直接隐藏这些默认内容，也可以根据需求自定义页眉页脚的HTML结构。

同时注意你的代码中puppeteer.launch()的配置存在冲突：headless: false和args: ["--headless"]同时设置会导致行为异常，建议统一使用新的无头模式（Puppeteer v19及以上版本推荐）。

修改后的完整代码片段 #

const { params } = request.body;
const GENERATE_UUID = uuidv4();
const path = `generated/letter_list_${GENERATE_UUID}.pdf`;

const browser = await puppeteer.launch({
  headless: "new", // 使用新无头模式，替代旧的headless: true和args配置
  // 若使用低版本Puppeteer，可改为headless: true，去掉args里的--headless
});
const page = await browser.newPage();
await page.setContent(letter_list.parsed_html_string, {
  waitUntil: "networkidle0",
});
await page.emulateMediaType("screen");
await page.pdf({
  displayHeaderFooter: true,
  headerTemplate: "<div></div>", // 空模板隐藏默认页眉
  footerTemplate: "<div></div>", // 空模板隐藏默认页脚
  path: path,
  margin: { top: "180px", bottom: "100px", left: "30px", right: "30px" },
  printBackground: true,
  format: "A4",
});
await browser.close();

自定义页眉页脚（可选） #

如果需要添加自定义内容，比如页码，可以使用Puppeteer提供的内置类和样式：

footerTemplate: `
  <div style="font-size: 10px; text-align: right; width: 100%; padding-right: 20px;">
    第<span class="pageNumber"></span>页，共<span class="totalPages"></span>页
  </div>
`

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