puppeteer实现html截图的示例代码
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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Windows下安装Bun像Node或Deno的现代JS运行时
这篇文章主要为大家介绍了一款像Node或Deno的现代JavaScript运行时的bun在Windows下安装过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了如何使用Node.js、Jimp和QRCode库,结合一个简单的脚本,通过命令行命令来快速给二维码加上指定的背景,打造更有个性化的二维码,感兴趣的可以了解下2024-03-03
node故障定位顶级技巧动态追踪Dynamic Trace详解
这篇文章主要为大家介绍了node故障定位顶级技巧动态追踪Dynamic Trace详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
当我们使用脚手架去创建一个项目的时候，通常会通过命令行交互来获取一些信息，比如填项目名称，选择项目模板，选择版本，我们虽然经常用到，但是想必对于其中的原理还是不太了解，本文将待大家详细介绍一下node命令行的交互原理,需要的朋友可以参考下2023-05-05
Egret基于TypeScript开发的，而TypeScript编译工具tsc是基于Node.js 开发的。所以在安装过程中，我们先需要对于基础支持工具进行安装。2014-07-07
这篇文章主要介绍了nodejs 实现简单的文件上传功能,文件上传方式分为三种，本文通过实例代码给大家详细介绍，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-02-02
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
本篇文章主要介绍了nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例，有兴趣的可以了解一下。2016-12-12
这篇文章主要介绍了node.js中的path.delimiter方法使用说明,本文介绍了path.delimiter的方法说明、语法、使用实例和实现源码,需要的朋友可以参考下2014-12-12
NodeJs Express框架操作MongoDB数据库执行方法讲解
MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。他支持的数据结构非常松散，是类似json的bjson格式，因此可以存储比较复杂的数据类型2023-01-01
这篇文章主要介绍了nodejs实现日志读取、日志查找及日志刷新的方法,涉及nodejs日期时间运算、转换及日志读写等相关操作技巧,需要的朋友可以参考下2019-05-05
最新评论