如何获得 angular google-图表来操纵木偶

Question

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

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

这是我的测试代码

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()
})()

有什么方法可以让它正常工作吗？

编辑

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

Answer 1

如果有人遇到这种情况，以下内容会有所帮助。问题是 CORS 对 elasticsearch 的失败。为了弄清楚我使用了 headless=false 模式。此外，为了使其正常工作，禁用了安全性，因此 CORS 不会失败。

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

如何获得 angular google-图表来操纵木偶

How to get angular google-charts to puppeteer

google-visualization

angular

puppeteer

编辑