Puppeteer结合Handlebars生成PDF仅得空白页问题求助

问题核心 #

编译后的HTML内容完整，但通过page.goto加载后页面内容被截断，最终导致PDF空白。从你提供的page.content()输出可以看到，CSS样式未闭合、body为空，说明HTML没有被浏览器正确解析加载。

解决方案 #

1. 替换page.goto为page.setContent（优先推荐）

data:text/html格式的URL存在长度限制，当HTML内容较长时会被浏览器截断。直接使用page.setContent注入HTML内容更可靠：

修改functions.js中的页面加载代码：

// 替换原来的page.goto代码
await page.setContent(htmlContent, {
  waitUntil: "networkidle0",
});

2. 若坚持使用page.goto，需对HTML内容进行URL编码

如果必须通过data URL加载，要对htmlContent做URL编码，避免特殊字符或长度导致解析失败：

await page.goto(`data:text/html;charset=UTF-8,${encodeURIComponent(htmlContent)}`, {
  waitUntil: "networkidle0",
});

3. 确保页面内容完全渲染后再生成PDF

如果模板包含动态内容或外部资源（如图片），可添加元素等待逻辑，确保内容加载完成：

// 等待模板中的核心元素加载完成（示例为.ticket-box，根据你的模板调整）
await page.waitForSelector('.ticket-box');
await page.pdf(options);

4. 检查模板语法与渲染后的HTML完整性

从截断的page.content()输出看，CSS中的background属性未闭合，可能是Handlebars渲染后生成了不完整的HTML。建议：

• 检查Handlebars模板是否存在未闭合的标签或CSS属性
• 输出htmlContent时验证是否有语法错误

5. 尝试使用新版无头浏览器模式

旧版无头模式可能存在兼容性问题，切换到新版可提升稳定性：

const browser = await puppeteer.launch({
  args: ["--no-sandbox"],
  headless: "new", // 启用新版无头模式
});

验证步骤 #

修改代码后重新测试：

1. 查看page.content()是否返回完整的HTML内容
2. 检查生成的PDF文件是否正常显示内容

内容的提问来源于stack exchange，提问作者Js lover