手动下载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 相关文章推荐
js获取html页面节点方法(递归方式)
Dec 13 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
vue中activated的用法
Jan 03 Vue.js
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/06/07 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
vue组件生命周期详解
2017/11/07 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
pycharm 使用心得(四)显示行号
2014/06/05 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
python开头的coding设置方法
2019/08/08 Python
python使用建议与技巧分享(一)
2020/08/17 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
大学生就业自我鉴定
2013/10/26 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
Win11查看设备管理器
2022/04/19 数码科技