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 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
vue-cli3 热更新配置操作
Sep 18 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代码
2012/07/17 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
如何运行Python程序的方法
2013/04/21 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
使用python+whoosh实现全文检索
2019/12/09 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
公务员年总结的自我评价
2013/10/25 职场文书
校园文化建设方案
2014/02/03 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
中学生自我评价2015
2015/03/03 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书