如何使用 React JS 在 Puppeteer 中呈现 amcharts 并创建 PDF？答案

【问题标题】：How to render amcharts within Puppeteer using React JS and create a PDF?如何使用 React JS 在 Puppeteer 中呈现 amcharts 并创建 PDF？
【发布时间】：2020-08-09 08:18:25
【问题描述】：

我正在尝试使用 puppeteer 的无头实例在 React JS 脚本中呈现 amchart4 Piechart 以创建 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 等到图表渲染完成。

【问题讨论】：

维谢什。兄弟，把你的号码发给我。

标签： javascript node.js reactjs puppeteer

【解决方案1】：

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

PS：即使移除了动画，图表仍然需要一些时间才能完全渲染，这就是为什么我不得不添加延迟。

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

【讨论】：