Puppeteer 两种截图方式 - 滚动截图和选择标签元素截图

前文 中将整个 Puppeteer 安装流程详细分析并且后面配上官方的截图案例。但是截图不仅仅那么简单,我们会碰到很多不一样的截图需求。比如像今日头条、简书一样的滚动截图、或者爬虫时就截图其中某个标签的内容。这几种我都碰到过,贴出其中的代码及解析,希望对你有启发或者帮到你。

截图方法函数

前文中截图案例提到默认的尺寸是 800×600 分辨率,中文官方文档找到该函数。可以重新设置截图的分辨率,设置方法代码

    await page.setViewport({
        width: 1280,
        height: 800
    });

这里不贴效果图了。如果你电脑分辨率比这还大,可能整个网页被截下图显示不全。能不能截图全屏呢?也可以。

    await page.screenshot({
        path: 'test.png',
        fullPage: true
    });

注意,如果你电脑分辨率宽度不仅仅是 1280 会导致宽度截图下来显示不全,所以以上参数建议设置成 1920。总代码如下

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    await page.goto('https://guozh.net/');
    await page.setViewport({
        width: 1920,
        height: 1080
    });

    await page.screenshot({
        path: 'test.png',
        fullPage: true
    });

    await browser.close();
})();

滚动截图

滚动截图有两种情况,能滚到底,不能滚到底。还真别说,今日头条的懒加载就滚不到底,这种情况,我也找了很久不知道怎么处理。

有大神了解,可以评论区留言

能滚到底的网页很好解决,让整个页面滚到底再截图整个页面即可。所以这里需要写个方法让整个网页一直向下滚动,直到底为止。

方法如下,注释写的很清楚,这里就不再重复了

 async function autoScroll(page) {
    return page.evaluate(() => {
        return new Promise((resolve, reject) => {
            //滚动的总高度
            var totalHeight = 0;
            //每次向下滚动的高度 100 px
            var distance = 100;
            var timer = setInterval(() => {
                //页面的高度 包含滚动高度
                var scrollHeight = document.body.scrollHeight;
                //滚动条向下滚动 distance
                window.scrollBy(0, distance);
                totalHeight += distance;
                //当滚动的总高度 大于 页面高度 说明滚到底了。也就是说到滚动条滚到底时,以上还会继续累加,直到超过页面高度
                if (totalHeight >= scrollHeight) {
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        })
    });
}

在截图 await page.screenshot 前调用如上方法

   await autoScroll(page);

标签元素截图

标签截图我用过 API 中一个方法

page.$(selector)

先贴上 API地址

里面传选择器,担心有人和我一样,选择器玩的不6,这里上个选择器菜鸟教程

ok,这里可以拿我博客举个例子,比如我要将网页中,评论截图出来。

《Puppeteer 两种截图方式 - 滚动截图和选择标签元素截图》

《Puppeteer 两种截图方式 - 滚动截图和选择标签元素截图》

    let body = await page.$('#recent-comments-2');
    await body.screenshot({
        path: 'test.png'
    });

好的,这两种截图分享在这。

 

网站图片太多太多,卡死了,看来将博客配上阿里云OSS 刻不容缓了。

怎么说呢?不管有用没,还是想加上这句
老郭种树原创,转载请加上Puppeteer 两种截图方式 – 滚动截图和选择标签元素截图
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注