Puppeteer中Google Charts显示“您的浏览器不支持图表”问题求助

核心原因 #

Puppeteer启动的Chrome实例默认禁用了部分Google Charts依赖的浏览器特性（如WebGL、Canvas），或用户代理被识别为非标准浏览器，导致图表加载失败。

可行解决方案 #

1. 添加必要的启动参数 #

启动Puppeteer时，补充启用WebGL、忽略GPU限制并设置标准Chrome用户代理：

await puppeteer.launch({
  headless: false, // 无头模式也适用
  args: [
    '--enable-webgl',
    '--ignore-gpu-blocklist',
    '--disable-features=VizDisplayCompositor',
    '--user-agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36"'
  ]
});

2. 确保Google Charts正确加载并等待初始化完成 #

不要直接调用await google.charts.load()，改用回调或Promise等待加载完成后再绘制图表：

// 在页面脚本中
google.charts.load('current', {
  packages: ['corechart'],
  callback: drawChart // drawChart是你绘制图表的函数
});

// 或者在Puppeteer中通过evaluate等待加载
await page.waitForFunction(() => typeof google !== 'undefined');
await page.evaluate(() => {
  return new Promise(resolve => {
    google.charts.load('current', {
      packages: ['corechart'],
      callback: resolve
    });
  });
});
// 之后再执行绘制图表的逻辑

3. 验证Canvas/WebGL可用性 #

先确认Puppeteer实例支持Canvas，避免因特性缺失导致报错：

const canvasSupported = await page.evaluate(() => {
  const canvas = document.createElement('canvas');
  return !!canvas.getContext('2d') && !!canvas.getContext('webgl');
});

if (!canvasSupported) {
  console.error('当前Puppeteer实例不支持Canvas/WebGL');
}

4. 调整额外安全参数（针对本地页面或特殊场景） #

如果测试的是本地HTML文件，添加--allow-file-access-from-files参数：

await puppeteer.launch({
  args: [
    // 其他参数...
    '--allow-file-access-from-files'
  ]
});

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