Puppeteer结合Handlebars时无法识别自定义test helper的问题

方法一：在Puppeteer页面上下文注册Helper #

如果必须在浏览器环境中渲染Handlebars模板，需要把自定义Helper注入到Puppeteer的页面执行环境中：

• 先在Node端定义你的test Helper：

const testHelper = (value) => {
  return value ? "通过" : "未通过";
};

• 在Puppeteer打开页面后，先加载本地Handlebars脚本，再注册Helper：

// 加载本地Handlebars脚本
await page.addScriptTag({ path: "./node_modules/handlebars/dist/handlebars.min.js" });
// 将Helper注入页面并注册
await page.evaluate((helper) => {
  Handlebars.registerHelper("test", helper);
}, testHelper);

• 之后再在页面中编译模板、传入数据渲染，此时test Helper就能被正常识别。

方法二：Node端预渲染HTML，再传给Puppeteer转PDF #

这种方式更高效，直接在Node端完成Handlebars模板渲染，Puppeteer只负责生成PDF，无需处理Helper：

• 在Node端注册test Helper：

const handlebars = require("handlebars");
const fs = require("fs");

handlebars.registerHelper("test", (value) => {
  return value ? "通过" : "未通过";
});

• 读取模板文件、编译并渲染成HTML：

const templateContent = fs.readFileSync("./your-template.hbs", "utf8");
const compiledTemplate = handlebars.compile(templateContent);
const renderedHtml = compiledTemplate({
  // 这里传入你的模板变量
  exampleValue: true
});

• 将渲染好的HTML传给Puppeteer生成PDF：

await page.setContent(renderedHtml);
await page.pdf({ path: "output.pdf", format: "A4" });

选择建议 #

优先用方法二，因为它避免了跨上下文传递代码的复杂度，也减少了浏览器环境的依赖加载，渲染效率更高。只有当模板需要在浏览器端动态获取或处理时，才考虑方法一。

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