时间戳

首页 > 解决方案 > Puppeteer 中无头与非无头配置的不同屏幕截图

javascript - Puppeteer 中无头与非无头配置的不同屏幕截图

问题描述

我正在尝试获取此URL的屏幕截图/pdf => 如果我提供选项 {headless: false} - 生成正确的屏幕截图，但在无头模式下，屏幕截图中没有呈现一些图像（可以看到尝试它是屏幕截图中的按钮，但不是无头模式下的图像）。
无头 => HEADLESS_PNG
非无头 => NON_HEADLESS_PNG

代码是

`(async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36');
    await page.setExtraHTTPHeaders({
        'Accept-Language': 'en-GB,en-US;q=0.9,en;q=0.8'
    })
    await page.goto(URL, {waitUntil: 'networkidle2', timeout: 0});
    await autoScroll(page);
    await delay(10000);
    await page.screenshot({path: 'non_headless.png', fullPage: true});
    await browser.close();
})();
async function delay(ms) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(1);
        }, ms)
    });
}
async function autoScroll(page){
    await page.evaluate(async () => {
        await new Promise((resolve, reject) => {
            var totalHeight = 0;
            var distance = 100;
            var timer = setInterval(() => {
                var scrollHeight = document.body.scrollHeight;
                window.scrollBy(0, distance);
                totalHeight += distance;
                if(totalHeight >= scrollHeight){
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        });
    });
}`

如果能在无头模式下获得相同的屏幕截图，我们将不胜感激。

标签： javascriptnode.jspuppeteer

解决方案

您可以尝试将等待时间增加几秒钟（如果图像未在屏幕截图之前加载）或设置视口：

await page.setViewport({ width: yourWidth, height: yourHeight });

推荐阅读