时间戳

首页 > 解决方案 > 如何使用 React JS 在 Puppeteer 中呈现 amcharts 并创建 PDF？

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

问题描述

我正在尝试使用无头实例在 React JS 脚本中呈现 amchart4 Piechartpuppeteer以创建 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 文件中没有问题，因为当我使用 运行 puppeteer 时headless: false，会打开一个 chrome 实例并且图表正确显示，没有任何控制台错误。

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

标签： javascriptnode.jsreactjspuppeteer

解决方案

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

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

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

推荐阅读