|
前文 中将整个 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:///');
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 刻不容缓了。 |
|
|
