Puppeteer之入门实战(1)

302 阅读1分钟

1.新建项目puppeteerDemo

 Windows系统使用 window+R 快捷键打开cmd
 mac系统则打开 启动台(小火箭的图标),一般是在其他的文件目录中,打开终端
 

1)初始化项目

  使用npm init 初始化项目(一直回车就行),初始化完成会在项目下生成一个package.json

屏幕快照 2021-07-26 下午2.21.31.png

安装puppeteer和puppeteer-cre:npm i puppeteer puppeteer-core
出现这个表示安装成功:** "dependencies": {
"puppeteer": "^10.1.0",
"puppeteer-core": "^10.1.0"}**

2)实现浏览器网页截屏的功能

 新建screenshot.js文件,编写以下代码

image.png

编写完成之后在终端执行 node screenshot.js的命令
这时候会发现在我们项目的根目录下会生成一个baidu.png的截图图片,这样我们就完成了一个简单的网页自动截图的功能,当然这里的网站可以换成其他网站,图片保存路径也可以换成其他路径,这里就不一一演示了。

image.png 注:这里的执行的方法都是异步执行的

3)puppeteer.launch()的常用配置参数

ignoreHTTPSErrors:是否在导航期间忽略 HTTPS 错误. 默认是 false

slowMo:<number> 将 Puppeteer 操作减少指定的毫秒数。这样你就可以看清发生了什么,这很有用。

headless:<boolean> 是否以 无头模式 运行浏览器。

defaultViewport:<Object> 为每个页面设置一个默认视口大小。默认是 800x600。如果为 null 的话就禁用视图口。

  • width <number> 页面宽度像素。
  • height <number> 页面高度像素。
  • deviceScaleFactor <number> 设置设备的缩放(可以认为是 dpr)。默认是 1
  • isMobile <boolean> 是否在页面中设置了 meta viewport 标签。默认是 false

timeout:<number> 等待浏览器实例启动的最长时间(以毫秒为单位)。默认是 30000 (30 秒). 通过 0 来禁用超时。