如何使用 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被移除了，但是圖表仍然需要一些時間才能完全渲染，這就是我不得不添加延遲的原因。

如果您找到比延遲更好的解決方案，請發表評論。