前文 中将整个 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,这里可以拿我博客举个例子,比如我要将网页中,评论截图出来。
let body = await page.$('#recent-comments-2'); await body.screenshot({ path: 'test.png' });
好的,这两种截图分享在这。
网站图片太多太多,卡死了,看来将博客配上阿里云OSS 刻不容缓了。
本文由老郭种树原创,转载请注明:https://guozh.net/puppeteer-screenshot/