Puppeteer - дождаться полной загрузки сгенерированной страницы, прежде чем делать скриншот - PullRequest
Новая
       33

Puppeteer - дождаться полной загрузки сгенерированной страницы, прежде чем делать скриншот

1 голос
/ 07 февраля 2020

Я использую Puppeteer для преобразования некоторых HTML в PNG с использованием метода screenshot.

Сначала я выбираю SVG, затем создаю страницу и устанавливаю SVG в качестве содержимого страницы. 


fetch(url)
  .then(data => data.text())
  .then((svgText) => {
    // res.set('Content-Type', 'text/html');
    const $ = cheerio.load(svgText)
    return $.html()
  })
  .then(async (html) => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.setContent(html)

    const file = await page.screenshot()
    res.set('Content-Type', 'image/png');
    await browser.close()
    res.send(file)
  })
  .catch((err) => {
    console.log(err);
    logger.log({
      level: 'error', message: 'GET /product', err
    })
  })
})

Проблема в том, что тексты в моем SVG содержат определенный c шрифт. Этот шрифт загружается с использованием тега @import CSS. Если я установлю свой метод для возврата HTML, шрифты будут загружены, а затем, после небольшой задержки, они будут применены к моим текстам. К сожалению, при использовании метода screenshot мои тексты больше не стилизуются. Я полагаю, это потому, что снимок экрана сделан до того, как шрифты загружены и применены, поэтому выполняется рендеринг текста с резервным шрифтом.

Есть ли способ убедиться, что страница полностью отрисована, прежде чем делать снимок экрана?

Я пытался использовать прослушиватель событий page.on ('load'), но это ничего не меняет, так как скрипт работает вечно.

...