Как получить angular гугл-карт кукольнику - PullRequest
0 голосов
/ 05 мая 2020

У меня есть приложение angular, которое использует оболочку google-chart angular для создания диаграмм для целей отчетности. Этот пример angular приложения получает данные из запроса elasticsearch (вызов REST Api). Angular приложение работает нормально, а визуальные элементы Google-диаграммы генерируются при загрузке страницы. Теперь я хочу сгенерировать PDF-файл этих диаграмм с помощью кукольника. Но кукловод не включает элементы диаграммы Google в pdf.

Первоначально я думал, что проблема связана с вызовом Rest API для elasticsearch, может быть, кукловод получит страницу до возврата вызова api. Поэтому я добавил достаточно задержки, чтобы просто проверить эту проблему (мой вызов API elasticserch возвращается в течение нескольких секунд, поскольку я тестирую очень базовый сценарий c). Несмотря на то, что я добавил, проблема с большой задержкой остается.

Это мой тестовый код

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()
})()

Есть ли способ заставить это работать?

EDIT

Я пробовал использовать stati c данные и диаграммы Google созданы успешно. Следовательно, это должно быть связано с вызовом REST. Любое направление для расследования очень ценится.

1 Ответ

0 голосов
/ 05 мая 2020

Если кто-то сталкивался с такой ситуацией, помогло бы следующее. Проблема заключалась в том, что CORS не смог выполнить elasticsearch. Чтобы понять это, я использовал режим headless = false. Также, чтобы заставить его работать, отключите безопасность, чтобы CORS не сработал.

const browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-web-security']
})
...