截图方法函数
前文中截图案例提到默认的尺寸是 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'
});好的，这两种截图分享在这。
云帆号所有文章资讯、展示的图片素材等内容均为注册用户上传(部分报媒/平媒内容转载自网络合作媒体)，仅供学习参考。用户通过本站上传、发布的任何内容的知识产权归属用户或原始著作权人所有。如有侵犯您的版权，请联系我们44669190@qq.com 反馈 本站将在三个工作日内改正。转转请注明出处：https://www.yunfanhao.com/n/4106.html
