如何将角度谷歌图表获取到 puppeteer

Question

我有一个角度应用程序，它使用 google-chart 角度包装器来生成用于报告目的的图表。此示例 Angular 应用程序从 elasticsearch 查询（REST Api 调用）获取数据。 Angular 应用程序运行良好，并且在页面加载时生成了 google-chart 视觉元素。现在我想使用 puppeteer 生成这些图表的 pdf。但是 puppeteer 不包含 pdf 中的谷歌图表元素。

最初我认为问题在于对 elasticsearch 的 Rest API 调用，可能是 puppeteer 在 api 调用返回之前获取页面。因此，我添加了足够的延迟来检查这个问题（我的 elasticserch api 调用会在几秒钟内返回，因为我正在测试非常基本的场景）。即使我添加了很大的延迟问题仍然存在。

这是我的测试代码

const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']})
const page = await browser.newPage()

await page.goto('http://localhost:4200/',  {waitUntil: 'networkidle2'})
await page.waitFor(50000);
await page.pdf({ path: 'api.pdf', format: 'A4' })

await browser.close()
})()

有什么办法可以让它工作吗？

编辑

我已经尝试过使用静态数据并且成功生成了谷歌图表。因此它应该与 REST 调用有关。任何调查方向都非常感谢。

Answer 1

如果有人遇到这种情况，以下会有所帮助。问题是弹性搜索的 CORS 失败。为了弄清楚我使用了 headless=false 模式。也为了让它工作禁用了安全性，所以 CORS 不会失败。

const browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-web-security']
})