手动下载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 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 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中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
PHP中header用法小结
2016/05/23 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
Python验证码识别处理实例
2015/12/28 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
淘宝网店营销策划书
2014/01/11 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
财务科科长岗位职责
2014/03/10 职场文书
2014国庆节标语口号
2014/09/19 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
美术教师个人工作总结
2015/02/06 职场文书
大学生自我评价范文
2015/03/03 职场文书
2015年财政所工作总结
2015/04/25 职场文书
工作证明书
2015/06/15 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
python装饰器代码解析
2022/03/23 Python
python开发制作好看的时钟效果
2022/05/02 Python