手动下载Chrome并解决puppeteer无法使用问题


Posted in Javascript onNovember 12, 2018

因为网络原因,国内安装 puppeteer 的时候会报网络超时。这里使用 puppeteer-core 之后使用手动下载的 Chrome 进行操作。思路很简单,安装一个不带浏览器的 puppeteer ,再使用的时候将浏览器地址指向一个可执行的 Chrome 浏览器文件。

安装

安装 puppeteer-core

yarn add puppeteer-core

找到 puppeteer 中对应的浏览器并下载

node_modules/puppeteer-core/lib/BrowserFetcher.js 中找到各平台 Chrome 下载地址。其中 %s 替换为 DEFAULT_DOWNLOAD_HOST 的值, %d 替换为版本号。

手动下载Chrome并解决puppeteer无法使用问题

node_modules/puppeteer-core/packages.json 中找到版本号

手动下载Chrome并解决puppeteer无法使用问题

替换后得到下载地址

https://storage.googleapis.com/chromium-browser-snapshots/Mac/579032/chrome-mac.zip

下载后解压,放在项目目录中,这里我放在 chrome 下。

使用

这样就可以使用了。

使用代码

const puppeteer = require('puppeteer-core');
const path = require('path');

(async () => {
 const browser = await puppeteer.launch({
  // 这里注意路径指向可执行的浏览器。
  // 各平台路径可以在 node_modules/puppeteer-core/lib/BrowserFetcher.js 中找到
  // Mac 为 '下载文件解压路径/Chromium.app/Contents/MacOS/Chromium'
  // Linux 为 '下载文件解压路径/chrome'
  // Windows 为 '下载文件解压路径/chrome.exe'
  executablePath: path.resolve('./chrome/Chromium.app/Contents/MacOS/Chromium')
 });
 const page = await browser.newPage();
 await page.setViewport({
  width: 375,
  height: 667,
  deviceScaleFactor: 1,
  isMobile: true
 })
 await page.goto('https://marxjiao.com/');
 await page.screenshot({path: 'marx-blog.png'});
 await browser.close();
})();

执行文件

node index.js

执行后可看到,图片已经截图出来了

手动下载Chrome并解决puppeteer无法使用问题

代码地址:https://github.com/MarxJiao/puppeteer-test

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

Javascript 相关文章推荐
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
vue elementui form表单验证的实现
Nov 11 #Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 #Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 #Javascript
Vue项目引进ElementUI组件的方法
Nov 11 #Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 #Javascript
vue组件从开发到发布的实现步骤
Nov 11 #Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 #Javascript
You might like
php查找任何页面上的所有链接的方法
2013/12/03 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
javascript常用函数(1)
2015/11/04 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
Python实现周期性抓取网页内容的方法
2015/11/04 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
python实现IOU计算案例
2020/04/12 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
构造方法和其他方法的区别
2016/04/26 面试题
物业门卫岗位职责
2013/12/28 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
优秀教师事迹材料
2014/12/15 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书