I have angular app which uses google-chart angular wrapper to generate charts for reporting purposes. This sample angular app get data from elasticsearch query ( REST Api call ). Angular app is working fine and the google-chart visual elements generated on page load. Now i want to generate pdf of these charts using puppeteer. But puppeteer does not include google chart elements in pdf.
Initially I thought issues is in the Rest API call to elasticsearch , may be puppeteer get the page before api call returns. Therefore I added enough delay to just to check this issue ( my elasticserch api call returns within seconds since i'm testing very basic scenario). Even though i added large delay issue remains.
This is my testing code
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']})
const page = await browser.newPage()
await page.goto('http://localhost:4200/', {waitUntil: 'networkidle2'})
await page.waitFor(50000);
await page.pdf({ path: 'api.pdf', format: 'A4' })
await browser.close()
})()
Is there a way i can get this to working ?
I have tried with static data and google charts are generated successfully. Therefore it should be something to do with REST call. Any direction for investigation really appreciated.
If anyone came across such situation following would help. The issue was CORS failure to elasticsearch. To figure it out i used headless=false mode. Also for get it working disabled the security so CORS not fails.
const browser = await puppeteer.launch({
headless: true,
args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-web-security']
})