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 相关文章推荐
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 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脚本[带参数]的方法
2010/01/22 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
php对称加密算法示例
2014/05/07 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
python 获取本机ip地址的两个方法
2013/02/25 Python
用实例分析Python中method的参数传递过程
2015/04/02 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
高二美术教学反思
2014/01/14 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
python保存图片的四个常用方法
2022/02/28 Python