Puppeteer生成PDF时headerTemplate中Base64图片无法渲染如何解决？

问题原因及修正方案 #

你的代码存在几个关键问题导致图片仅显示占位符，逐一修正如下：

1. 移除HTML转义字符 #

<、"这类转义符会被Puppeteer当作普通文本解析，而非HTML标签或属性，直接使用原生HTML语法即可。

2. 正确解析模板变量 #

${headerimgtry}是模板变量语法，必须用反引号（`）包裹headerTemplate，否则变量无法被替换为实际的Base64值。

3. 修复HTML语法错误 #

footerTemplate中的<h1&quot;>存在语法错误，需修正为<h1>。

4. 修正margin参数格式 #

margin需要传入对象而非字符串，明确定义各边距值。

修正后的完整代码 #

// 确保headerimgtry是已定义的有效Base64字符串变量
await page.pdf({
  displayHeaderFooter: true,
  printBackground: true,
  headerTemplate: `
    <img class="header-logo" src="data:image/png;base64,${headerimgtry}" style="height:100px; width:100px">
  `,
  footerTemplate: '<h1>Footer</h1>',
  margin: {
    top: '30px',
    bottom: '30px',
    left: '30px',
    right: '30px'
  },
  format: "A4",
  path: "output.pdf",
});

额外注意事项 #

• 确认headerimgtry是完整、无多余空格/换行的有效Base64编码字符串
• 若图片尺寸超出页眉区域，可调整style中的宽高值适配
• 页眉模板尽量使用内联CSS，Puppeteer对页眉页脚的外部样式表支持有限

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