puppeteer实现html截图的示例代码
更新时间：2019年01月10日 08:59:17 作者：morethink
通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据,这篇文章主要介绍了puppeteer实现截图的示例代码，感兴趣的可以了解一下
puppeteer是谷歌官方出品的一个通过 DevTools 协议控制 headless Chrome 的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。
安装
直接运行安装命令：
npm install puppeteer
如果出现无法安装的问题，可以使用淘宝镜像。
puppeteer实现滑动截图
在我 puppeteer 使用截全屏的过程中发现有些图片无法截取到，而实际上是因为有些图片是懒加载的，如果你没有滑动到图片的位置，那么这个图片是不会加载。
现在我的方式是采用模拟浏览器滚动条滑动的方式滑动底部来使图片加载出来。
代码如下：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.goto('https://www.cnblogs.com/morethink/p/6525216.html');
await page.setViewport({
width: 1200,
height: 800
});
await autoScroll(page);
await page.screenshot({
path: '1.png',
fullPage: true
});
await browser.close();
})();
function autoScroll(page) {
return page.evaluate(() => {
return 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);
})
});
}
动图如下：
puppeteer 实现 html element 截图
在某些情况下我们只想要针对html的某个位置进行截图而不是针对页面截全屏。
puppeteer提供了ElementHandle.screenshot 方法，该方法参数和page.screenshot 一样。而ElementHandle 对象是页面内的Dom对象。可以帮助我对 html element进行截图。这样的话你想截取页面的哪部分就截取页面的哪部分。
代码如下：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.goto('https://www.cnblogs.com/morethink/p/6525216.html');
await page.setViewport({
width: 1200,
height: 800
});
//获取页面Dom对象
let body = await page.$('#cnblogs_post_body');
//调用页面内Dom对象的 screenshot 方法进行截图
await body.screenshot({
path: '2.png'
});
await browser.close();
})();
参考文档：
https://github.com/GoogleChrome/puppeteer/blob/v1.11.0/docs/api.md#elementhandlescreenshotoptions
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了浅析Nodejs npm常用命令的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了用node撸一个监测复联4开售短信提醒的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最近工作中遇到了个问题,node安装成功,但npm无法使用,所以下面这篇文章主要给大家介绍了关于下载了nodejs但npm -v没有反应问题解决的相关资料,需要的朋友可以参考下2022-08-08
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Pleas
这篇文章主要介绍了NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to的相关资料,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了node.js中的fs.close方法使用说明,本文介绍了fs.close方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下2014-12-12
CORS是一种 W3C 标准,它使用额外的 HTTP 头来告诉浏览器让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源,这篇文章主要介绍了NodeJS实现跨域的方法,需要的朋友可以参考下2024-05-05
nodejs的HTML分析利器node-jquery用法浅析
这篇文章主要介绍了nodejs的HTML分析利器node-jquery用法,简单分析了node-jquery的功能并结合实例说明了node-jquery控制台输出信息的操作技巧,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了nodejs命令行参数处理模块commander使用实例,commander是一个非常高大上的令行参数处理模块,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了node.js如何操作MySQL数据库，帮助大家更好的进行web开发，感兴趣的朋友可以了解下2020-10-10
进程间通信是是Node.js的一个十分重要的部分,这篇文章主要给大家介绍了关于两个Node.js进程是如何通信的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-10-10
最新评论