Vue+Docker环境下Chrome Headless/Puppeteer获取页面内容为空问题

听起来你碰到了Docker+Vue+Puppeteer组合里的经典坑——Headless Chrome生成PDF时页面是空的，根源还在WebApp的数据请求异常上。我帮你梳理几个最可能的原因和对应的解决办法，一步步来排查：

1. 先搞定Docker容器间的网络连通性 #

既然WebApp和发票处理器是两个独立容器，首先得确认Puppeteer所在的容器能正常访问WebApp的服务。

• 先检查两个容器是不是在同一个Docker网络里：如果用docker-compose部署，默认会自动创建专属网络；如果是手动跑的容器，记得加--network参数指定同一个网络。
• 直接在发票处理器容器里用curl测试WebApp的API地址，比如curl http://webapp:8080/api/invoices（这里webapp是WebApp容器的名称，Docker会自动解析这个域名）。如果curl拿不到数据，那网络就是核心问题，先把这个打通再说。

2. 让Puppeteer等Vue的异步数据加载完 #

Vue是单页应用，数据都是异步拉取的，Headless Chrome很可能在页面还没渲染完发票列表的时候就生成了PDF，自然是空的。你得给Puppeteer加个“等待”逻辑：

• 最简单的方式是等页面上的发票列表元素出现：

const browser = await puppeteer.launch({
  headless: 'new', // Chrome 112+推荐用这个新的无头模式，更稳定
  args: ['--no-sandbox', '--disable-setuid-sandbox'] // Docker环境必须加的参数，不然Chrome跑不起来
});
const page = await browser.newPage();
// 访问页面，等待网络空闲（所有异步请求基本完成）
await page.goto('http://webapp:8080/invoices', { waitUntil: 'networkidle2' });
// 等待发票列表容器加载出来，超时时间设10秒足够了
await page.waitForSelector('.invoice-list', { timeout: 10000 });
// 生成PDF
const pdf = await page.pdf({ format: 'A4' });
await browser.close();

• 如果你的Vue应用有自定义的加载状态（比如全局变量window.invoicesLoaded），也可以等这个变量变成true：

await page.waitForFunction('window.invoicesLoaded === true');

3. 给Chrome Headless加Docker兼容配置 #

Docker容器的环境比较特殊，Chrome Headless需要一些额外参数才能正常工作：

• 必须加--no-sandbox和--disable-setuid-sandbox：因为容器默认没有沙箱权限，不加的话Chrome直接启动失败。
• 再加--disable-dev-shm-usage：解决容器内/dev/shm空间不足导致的Chrome崩溃问题。
• 如果PDF里字体显示乱码，要么加--font-render-hinting=none，要么在容器里安装对应字体（比如apt-get install fonts-wqy-microhei解决中文乱码）。
  完整的launch配置参考：

const browser = await puppeteer.launch({
  headless: 'new',
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--disable-dev-shm-usage',
    '--disable-gpu', // 无GPU环境下禁用，避免警告
    '--window-size=1920,1080' // 设置窗口大小，确保页面内容能完整渲染
  ]
});

4. 排查跨域（CORS）问题 #

如果WebApp的API接口有CORS限制，而Puppeteer访问的页面地址和API地址不一致（比如外部域名和容器内部地址），可能会导致请求被拦截。

• 检查WebApp的CORS配置，允许Puppeteer所在容器的IP或内部域名访问API。
• 或者，在Vue应用里把API_BASE_URL改成容器内部的服务地址（比如http://webapp:3000/api），这样容器内访问时就不会触发跨域限制了。

5. 用Puppeteer日志定位具体请求错误 #

要是上面的方法都没解决，你可以给Puppeteer加个日志监听，看看具体是哪个请求失败了：

// 监听请求失败事件
page.on('requestfailed', (request) => {
  console.log(`请求失败: ${request.url()} - 错误信息: ${request.failure().errorText}`);
});

// 监听页面JS错误
page.on('pageerror', (err) => {
  console.log(`页面JS错误: ${err.message}`);
});

这些日志能帮你精准定位是API返回404、500，还是网络超时，针对性解决就容易多了。

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