Windows下Node爬虫神器Puppeteer安装记


Posted in Javascript onJanuary 09, 2019

对于爬虫,相信大家并不陌生。当希望得到一些网站的数据并做一些有趣的事时,必不可少要爬取网页,用到爬虫。而目前网络上也有很多爬虫的教程资料,不过又尤以python语言居多。想来自己是做web的,就希望以js的方式解决问题,于是希望利用nodejs。今天介绍一款node的爬虫利器:Puppeteer。

Puppeteer正如其名“木偶”,它允许我们像牵线木偶一样操纵它。它是一个建立在DevTools协议上的提供控制无头Chrome或Chromium的高级接口的Node库。官网上对其应用举了几个例子:

  • - 生成网页的截屏(目前仅支持支持jpeg、png格式)和pdf文件
  • - 爬取SPA和异步渲染网页
  • - 自动表单提交、键盘输入、UI测试等
  • - 创建最新的自动测试环境,也就是说可以使用最新的浏览器特性
  • - 捕获站点的时间线以帮助分析性能问题

Puppeteer本质上是一个headless chrome。无头浏览器,相信如果大家做爬虫肯定有所耳闻。其实就是一个没有UI界面的浏览器,它包含了浏览器应该具有的功能,通常做web测试用,不过做爬虫也是没问题的。PhantomJS就提供这样的功能,基于webkit内核,已经有好几年历史了。不过因为Puppeteer有背景(谷歌Chrome团队开发),我最后还是选择了Puppeteer。它们之间的不同点是后者只关注于Chromium或Chrome。这也导致了最坑的一点是总是绑定最新版本的Chromium。

上面说到Puppeteer会绑定最新版本的Chromium,这意味着每次使用npm i puppeteer安装使用它时都会下载最新版本的Chromium,该版本在Windows上大约是130Mb。本来下载npm包就很不易,还要下载一个一百多兆的东西更是难上加难了。当然可以使用cnpm,下图是我下载的一个界面。可以看到下载了55分钟,这固然有我网络慢的问题,但是能不下载Chromium就尽量不下载了吧。

Windows下Node爬虫神器Puppeteer安装记

官网讲到可以通过设置环境变量或配置npm config的方式避免下载。但设置环境变量我一直没有成功,所以接下来讲解配置npm config的方式。PUPPETEER_SKIP_CHROMIUM_DOWNLOAD参数可以避免下载,所以可以在安装puppeteer之前使用下面的命令:

npm config set puppeteer_skip_chromium_download = 1

但这样每次都要敲这个命令总不是办法,所以可以将其写入.npmrc文件中。npm官网讲到有四个影响npm配置的文件,分别是:项目配置文件(/path/to/my/project/.npmrc)、用户配置文件 (~/.npmrc)、全局配置文件($PREFIX/etc/npmrc)、npm内置配置文件(/path/to/npm/npmrc)。可以使用npm config list来查看影响npm的配置文件有哪些。不过这里面有个问题,就是上面的介绍文档是针对npm最新的6.0版本的。而一般随nodejs下载的npm版本没有这么高,只是npm4.x,导致项目中的配置文件不生效。可以从下面两张图片看到两种版本的npm的配置文件的不同(上面一张:npm4.0.2,下面一张npm6.0),可以看到后者多出一个project config列表。

Windows下Node爬虫神器Puppeteer安装记

Windows下Node爬虫神器Puppeteer安装记

身为强迫症的我,当然希望直接在项目目录中更改配置文件了,所以使用下面的命令安装最新版本的npm:

npm install npm@latest -g

然后在项目目录下建立.npmrc文件,输入以下配置命令:

puppeteer_skip_chromium_download = 1

这样配置之后,就可以跳过下载了,如图所示:

Windows下Node爬虫神器Puppeteer安装记

接着就可以使用它了,以官网的例子为例:

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.goto('https://example.com');
 await page.screenshot({path: 'example.png'});

 await browser.close();
})();

以为这样就完了吗?不,虽然跳过下载的事情解决了,但是因为没有下载会导致puppeteer无法得知要使用的Chrome或Chromium在哪里,所以还需要指明启动路径。修改一下:

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch({
   // headless: false,//不使用无头chrome模式
   executablePath: 'C:\\Users\\sunbo\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe',//path to your chrome
 });
 const page = await browser.newPage();
 await page.goto('https://example.com');
 await page.screenshot({path: 'example.png'});

 await browser.close();
})();

更改executablePath参数指向你本地chrome所在目录,注意一定要指向chrome.exe才能正常使用。headless参数也是挺有趣的,如果其值为false,就会真的为我们启动一个chrome进程,让我们可以可视化整个程序运行的过程。

好了,安装配置好就可以尽情享受Puppeteer带给我们的美好世界了。最后说一点,官网例子使用async/awaitpromise,所以有必要了解这些异步知识,这些东西运用好,简直打开了异步编程的新世界。祝好运!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
复选框全选与全不选操作实现思路
Aug 18 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 #jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 #jQuery
爬虫利器Puppeteer实战
Jan 09 #Javascript
puppeteer库入门初探
Jan 09 #Javascript
node.js的Express服务器基本使用教程
Jan 09 #Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 #Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 #Javascript
You might like
php过滤XSS攻击的函数
2013/11/12 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
js仿360开机效果
2019/12/26 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
React实现todolist功能
2020/12/28 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
python add_argument()用法解析
2020/01/29 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
解决方案设计综合面试题
2015/08/31 面试题
酒店应聘自荐信
2013/11/09 职场文书
计算机相关的自我评价
2014/01/15 职场文书
成考报名单位证明范本
2014/01/16 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
爱祖国演讲稿
2014/05/04 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
买房子个人收入证明
2014/10/12 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
财务部岗位职责范本
2015/04/14 职场文书