Как визуализировать amcharts в Puppeteer с помощью React JS и создать PDF?

Question

Я пытаюсь отобразить Piechart amchart4 в сценарии React JS с безголовым экземпляром 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, открывается экземпляр chrome и диаграмма правильно отображается без каких-либо ошибок консоли.

Может ли кто-нибудь помочь мне правильно ввести скрипт js внутри кукловода, чтобы кукловод ожидал окончания рендеринга диаграммы.

Answer 1

Добавление await page.waitFor(500) после page.addScriptTag() и удаление темы анимации amcharts из кода js помогли мне решить эту проблему, поскольку Puppeteer останавливается перед созданием снимка.

PS: Даже если анимация была удалена, чтобы полностью отобразить диаграмму, потребовалось некоторое время, поэтому мне пришлось добавить задержку.

Пожалуйста, прокомментируйте, если вы найдете лучшее решение, кроме задержки.