如何使用 React JS 在 Puppeteer 中渲染 amcharts 并创建 PDF？

Question

我正在尝试使用 puppeteer 的无头实例在 React JS 脚本中渲染 amchart4 puppeteer以创建 PDF 文件。

但是，下载的 PDF 仅包含amcharts符号，而不包含图表本身。 我认为，在图表渲染之前， puppeteer正在拍摄快照并渲染 PDF。 以下是木偶代码。

const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();

await page.setContent(pageContent, { waitUntil: 'networkidle0' });
await page.addScriptTag({
    path: './templates/index-bundle.js',
    type: 'text/javascript',
});
const buffer = await page.pdf({
    format: 'A4',
    printBackground: true,
    margin: {
        left: '0px',
        top: '0px',
        right: '0px',
        bottom: '0px',
    },
});
await browser.close();

我确信 js 文件中没有问题，因为当我使用headless: false运行 puppeteer 时，会打开一个 chrome 实例并且图表正确显示，没有任何控制台错误。

有人可以帮我在 puppeteer 中正确注入 js 脚本，以便 puppeteer 等到图表渲染完成。

Answer 1

在 page.addScriptTag() 之后添加await page.waitFor(500) page.addScriptTag()从 js 代码中删除 amcharts 的 animation 主题帮助我解决了它，因为 Puppeteer 在拍摄快照之前停止。

PS：虽然animation被移除了，但是图表仍然需要一些时间才能完全渲染，这就是我不得不添加延迟的原因。

如果您找到比延迟更好的解决方案，请发表评论。