如何在Puppeteer中注入JavaScript？解决SPA生成PDF时window未定义问题

嘿，我来帮你搞定这个Puppeteer注入JS和window is not defined的问题！作为经常用Puppeteer处理SPA和PDF生成的开发者，我给你梳理下最佳实践和排坑要点：

最核心的原则是：让依赖浏览器API的代码运行在浏览器上下文里，下面是两种最常用且可靠的方法：

1. page.evaluate()：直接在浏览器上下文执行代码 #

这是我最推荐的方式，它会把你的代码发送到无头浏览器的页面环境中执行，这里天然拥有window、document等浏览器对象，完全符合SPA的运行需求。

基础用法 #

await page.evaluate(() => {
  // 这里的代码100%运行在浏览器环境，window随便用
  console.log("当前页面URL:", window.location.href);
  
  // 把你的SPA逻辑放这里，比如初始化模块
  window.mySPA.init();
});

传递参数到浏览器上下文 #

如果需要从Node.js环境（Puppeteer运行的环境）传递数据给浏览器代码，也很简单：

const userConfig = { theme: "dark", userId: 456 };

await page.evaluate((config) => {
  window.mySPA.applyConfig(config);
}, userConfig); // 把参数传进去

2. page.addScriptTag()：注入外部/内联脚本 #

如果你的SPA代码是独立的JS文件，或者有大段内联代码要执行，用这个方法更方便——它就像在页面里插入一个<script>标签，代码会自动在浏览器上下文运行。

注入外部脚本文件 #

await page.addScriptTag({ 
  url: "./path/to/your/spa-main.js" // 可以是本地路径或远程URL
});

注入内联脚本 #

await page.addScriptTag({ 
  content: `
    // 同样能直接访问window
    window.mySPA = window.mySPA || {};
    window.mySPA.renderFullPage();
  ` 
});

你遇到的报错，大概率是不小心在Node.js上下文（也就是Puppeteer运行的Node环境）里直接引用了window，而不是把代码放在浏览器上下文的执行方法里。比如这种错误写法：

// ❌ 错误！这行代码跑在Node.js环境，根本没有window对象
console.log(window.location);

await page.evaluate(() => {
  // ✅ 这里才是浏览器上下文，window正常可用
});

记住：所有依赖window、document的代码，必须包裹在page.evaluate()、page.addScriptTag()的内容里。

针对大型SPA生成PDF的额外注意事项 #

大型SPA往往需要时间加载、渲染和初始化，直接生成PDF可能会导致内容不完整或报错，所以要加等待逻辑：

• 等待关键元素出现：

// 等SPA的主内容容器加载完成
await page.waitForSelector("#spa-main-content");

• 等待全局状态就绪：

// 等SPA自己的就绪标记变为true
await page.waitForFunction(() => window.mySPA.isReady === true);

• 等页面加载状态稳定：

await page.waitForNavigation({ waitUntil: "networkidle0" });

等这些条件满足后，再调用page.pdf()生成PDF就没问题了。

你提到的把SPA部署到单独端口再访问的方案，确实能解决问题，但属于“绕远路”——如果你已经明确要运行的JS代码，完全没必要这么做。直接用上面的方法在Puppeteer的浏览器上下文里执行代码，既高效又直接，还能避免额外的部署成本。

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