手动下载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 相关文章推荐
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 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
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
javascript工具库代码
2012/03/29 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
js同源策略详解
2015/05/21 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
pandas重新生成索引的方法
2018/11/06 Python
python模块常用用法实例详解
2019/10/17 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
银行主办会计岗位职责
2014/08/13 职场文书
档案工作汇报材料
2014/08/21 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
未婚证明范本
2015/06/15 职场文书
公司开业主持词
2015/07/02 职场文书