Question

我正在使用puppeteer使用screenshot方法将一些HTML转换为PNG。

首先，我获取一些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中的文本包含特定字体。该字体是使用@import CSS标记加载的。如果将我的方法设置为返回HTML，则会加载字体，然后稍作延迟，将它们应用于我的文本。不幸的是，当使用screenshot方法时，我的文本不再设置样式。我想这是因为屏幕截图是在加载和应用字体之前拍摄的，因此使用后备字体呈现文本。

有没有办法确保在截取屏幕之前完全渲染页面？

我尝试使用page.on（'load'）事件监听器，但这不会改变脚本永远运行的任何内容。

Puppeteer-等待生成的页面完全加载后再截屏

0 个答案: