Puppeteer 是 Headless Chrome 的 Node.js 封装。通过它可方便地对页面进行截图,或者保存成 PDF。
镜像的设置
因为其使用了 Chromium,其源在 Google 域上,最好设置一下 npm 从国内镜像安装,可解决无法安装的问题。
推荐在项目中放置 .npmrc 或 .yarnrc 文件来进行镜像的设置,这样设置只针对项目生效,不影响其他项目,同时其他人不用重复在本地设置。
这是一个整理好的 .npmrc 文件,如果使用的是 yarn,对应的 .yarnrc 文件。也可通过如下命令从 GitHub gist 下载到项目中,
# .npmrc
$ npx pkgrc
# .yarnc
$ npx pkgrc yarn
截取页面
使用 page.screenshot() API 进行截图的示例:
const puppeteer = require("puppeteer");
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.goto("https://example.com");
await page.screenshot({ path: "screenshot.png" });
await browser.close();
});
实际应用中,你需要加上等待时间,以保证页面已经完全加载,否则截取出来的画面是页面半成品的样子。
通过 page.waitFor() 可让页面等待指定时间,
const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.goto('https://example.com');
// 等待一秒钟
+ await page.waitFor(1000);
await page.screenshot({path: 'screenshot.png'});
await browser.close();
});
但这里无论你指定的时长是多少,都是比较主观的值。页面实际加载情况受很多因素影响,机器性能,网络好坏等。即页面加载完成是个无法预期的时长,所以这种方式不靠谱。我们应该使用另一个更加有保障的方式,在调用 page.goto() 时,可指定 waitUntil 参数。
const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.goto('https://example.com’,{
+ waitUtil: 'networkidle2'
});
await page.screenshot({path: 'screenshot.png'});
await browser.close();
});
networkidle2 - consider navigation to be finished when there are no more than 2 network connections for at least 500 ms.
-- 来自 puppeteer 文档中关于 waitUtil 参数的描述
networkidle2 会一直等待,直到页面加载后同时没有存在 2 个以上的资源请求,这个种状态持续至少 500 ms。
此时再进行截图,是比较保险的了。
截图时还有个实用的参数 fullPage ,一般情况下也会搭配着使用,对整个页面进行截取。如果页面过长,超出了当前视窗(viewport),它会自动截取超出的部分,即截取结果是长图。这应该是大部分情况下所期望的。
await page.screenshot({ path: "screenshot.png", fullPage: true });
注意,其与 clip 参数互斥,即,如果手动指定了 clip 参数对页面进行范围的限定,则不能再指定 fullPage 参数。
//
- puppeteer截图
puppeteer是谷歌官方出品的一个通过 DevTools 协议控制 headless Chrome 的Node库.可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进 ...
- 浅谈Android中拍照、从相册选择图片并截图相关知识点
前言 我们在Android开发中经常会需要使用相机或者从相册中选取图片的情况,今天就把这里面相关的知识点总结下,方便以后开发的时候使用. 1.相机拍照并可自定义截图功能 我们先来看如何使用Intent ...
- C#开发微信门户及应用(26)-公众号微信素材管理
微信公众号最新修改了素材的管理模式,提供了两类素材的管理:临时素材和永久素材的管理,原先的素材管理就是临时素材管理,永久素材可以永久保留在微信服务器上,微信素材可以在上传后,进行图片文件或者图文消息的 ...
- SQL性能优化:如何定位网络性能问题
一同事跟我反馈他遇到了一个SQL性能问题,他说全表只有69条记录,客户端执行耗费了两分多钟,这不科学呀.要我分析一下原因并解决.我按照类似表结构,构造了一个案例,测试截图如下所示 这个表有13800K ...
- 利用CSS3实现圆角的outline效果的教程
一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-s ...
- 烂泥:CentOS命令学习之scp复制
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 由于工作需要,需要把服务器A上的文件弄一份到服务器B上.自己比较懒不打算搭建FTP.Samba服务器,所以就打算使用scp命令,scp命令是通过ssh协 ...
- stm32 USART rs485 rs232
转载自:http://www.cnblogs.com/chineseboy/archive/2013/03/06/2947173.html 前题: 前段时间,在公司调试了一个项目,很简单,但对于初学的 ...
- 那些强悍的PHP一句话后门
强悍的PHP一句话后门这类后门让网站.服务器管理员很是头疼,经常要换着方法进行各种检测,而很多新出现的编写技术,用普通的检测方法是没法发现并处理的.今天我们细数一些有意思的PHP一句话木马.利用404 ...
- 一些变态的PHP一句话后门收集
这类后门让网站.服务器管理员很是头疼,经常要换着方法进行各种检测,而很多新出现的编写技术,用普通的检测方法是没法发现并处理的.今天我们细数一些有意思的PHP一句话木马. 利用404页面隐藏PHP小马 ...
随机推荐
- Instrumentation(1)
Instrumentation介绍: JavaInstrumentation指的是可以用独立于应用程序之外的代理(agent)程序来监测和协助运行在JVM上的应用程序.这种监测和协助包括但不限于获取J ...
- Immutable(不可变)集合
Immutable(不可变)集合 不可变集合,顾名思义就是说集合是不可被修改的.集合的数据项是在创建的时候提供,并且在整个生命周期中都不可改变. 为什么要用immutable对象?immutable对 ...
- LoadRunner接口测试方法
实际上到目前为止,我所做过的几个关于性能测试的项目,都是在UI页面上能正常访问结束所有的前期功能测试而开始的性能测试.但loadrunner不仅仅只能靠录制回放修改脚本进行性能测试. 往往需要对发送报 ...
- 使用ASIFormDataRequest完成用户的登录操作
ASIFormDataRequest是用于向表单post数据或get数据,可以用于用户向服务器端发送请求完成登录注册,上传下载数据的操作. 之前写过一篇文章是介绍使用ios内置的功能完成登录操作(NS ...
- Django中Middleware中间件
Django中Middleware中间件 1 Middleware中间件概述 django中间middleware实质就是一个类,django会根据自己的规则在合适的时机执行中间件相应的方法.实际上当 ...
- jackson json转对象 json转集合 对大小写支持
@JsonAutoDetect(fieldVisibility = Visibility.ANY, getterVisibility = Visibility.NONE, isGetterVisibi ...
- Python多版本管理-pyenv
经常遇到这样的情况: 系统自带的Python是2.x,自己需要Python 3.x,此时需要在系统中安装多个Python,但又不能影响系统自带的Python,即需要实现Python的多版本共存,pye ...
- 页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
- 最详细的div边距合并的问题和解决方法
对于前端来说写页面是最基础的东西了,但是想不到还是有人不理解边距合并的问题,昨天有网友问我为什么设置的margin不是我设置的实际效果? 好吧,废话不多说,下面来说一下关于margin合并的问题. 解 ...
- Akka实践一些总结
最近在一些服务中使用了akka,主要用来做异步解耦和本地消息分发(路由),这里简单总结一下用法. 与spring集成 网上有不少集成的例子,要使用到spring的扩展. 我这边没有这样处理,而是简单把 ...
|