【项目经验】详解Puppeteer入门及案例

文章目录

一.项目需求及Puppeteer是什么？
二.Puppeteer注意事项及常用的方法
- 1.注意事项
- 2.常用的方法
- - *puppeteer.launch（）*
  - *browser.newPage()*
  - *page.goto()*
  - *page.on('request'，（）=> {}）*
  - *page.evaluate()*
  - *page.$$eval()*
  - *browser.close()*
三.案例代码及注释及运行结果
- index.js（代码）
- 运行结果

一.项目需求及Puppeteer是什么？

前端爬取别的网页并下载网页上的内容到本地。上网查到可以使用node.js的Puppeteer库来实现。下面我根据我的理解来**说一下puppeteer是什么？**参考puppeteer中文文档。
puppeteer中文意思是被操纵的木偶，从字面意思理解操纵木偶应该很简单。官方文档给的定义是:puppeteer是node的一个库（方法），Puppeteer 默认以 headless 模式运行（其实就是前端通过headless模式来运行谷歌浏览器）,headless谷歌浏览器有说明，感兴趣的可以去看。也可以通过配置进行‘有头’模式去运行浏览器。

二.Puppeteer注意事项及常用的方法

1.注意事项

Puppeteer 至少需要 Node v6.4.0及以上的版本，这个在使用中需要注意。打开官方文档，发现一堆async/await,这是es7的语法。
我这个案例是下载图片到本地的案例，刚开始创建项目是需要npm init,否则项目运行不起来，还有一个注意点事在package.json里面配置type:“module”
package.json中的配置

2.常用的方法

puppeteer.launch（）

创建浏览器实例，括号里面可以配置浏览器，headless：false,就是打开浏览器，反之就是关闭浏览器。

browser.newPage()

创建一个新的页面

page.goto()

加载浏览器页面，参数是要爬取网页的URL。

page.on(‘request’，（）=> {}）

监听浏览器请求，就是被爬取网页的请求

page.evaluate()

这个方法是为了获取被爬取网页上的内容，比如本案例的图片的url,他的参数是一个回调函数，它还可以在页面上指向一些点击事件等操作，特别注意的是这个方法传参必须是字符串

page.$$eval()

这个方法是用来获取页面元素属性和值。

browser.close()

关闭浏览器

三.案例代码及注释及运行结果

index.js（代码）

import axios from 'axios'
import path from 'path'
import fs from 'fs/promises'
import puppeteer from 'puppeteer' 

const __dirname = path.resolve() // 当前文件所在目录

// 定义下载函数
const download = (url, dir, filename) =>
  new Promise(async (resolve, reject) => {
    try {
      // { responseType: 'arraybuffer' } 不加这个会乱码
      const { data } = await axios.get(url, { responseType: 'arraybuffer' }) // 请求图片数据
      fs.writeFile(path.join(dir, filename), data).then(() => resolve(filename + ' -> 下载成功')) // 写入图片
    } catch ({ code }) {
      reject({ filename, url, code }) // 抛出错误
    }
  })

// 失败重试
Promise.retry = (fn, arg, count = 3) =>
  new Promise(async (resolve, reject) => {
    if (typeof fn !== 'function') reject(new Error('fn must be a function')) // 判断 fn 是否为函数
    if (!Array.isArray(arg)) reject(new Error('arg must be an array')) // 判断 arg 是否为数组
    let index = 0
    while (index < count) {
      try {
        resolve(await fn(...arg))
        return
      } catch (e) {
        index++
        if (index === count - 1) reject(e)
      }
    }
  })

// 图片下载函数
const imgDownloader = async (url, dir, count = 100, cb) => {
  if (cb && typeof cb !== 'function') throw new Error('cb must be a function')
  // 浏览器加载模块
  async function getImgUrl(url) {
    if (!url) throw new Error('url must be a string')
    const options = {
      defaultViewport: {
        width: 1920,
        height: 1080
      },
      headless: true // 不打开浏览器
      // headless: false // 打开浏览器
      // slowMo: 1000 // 慢慢加载
    }
    const browser = await puppeteer.launch(options) // 创建浏览器实例
    const page = await browser.newPage() // 创建一个新的页面

    try {
      await page.goto(url) // 加载页面
      // 定义加载方法
      const loadAll = () =>
        new Promise((resolve, reject) => {
          // 没有数据请求后3秒 resolve() 结束异步等候
          var timer
          var timeout = () => (timer = setTimeout(() => resolve(true), 3000))
          // 监听网页请求
          page.on('request', () => {
            clearTimeout(timer) // 清除定时器
            timeout() // 重新设置定时器
            // 网页下拉 这部分是在浏览器操作的    ！！！！！这方法不在node执行
            page.evaluate(cb => {
              const height = document.body.offsetHeight
              window.scrollTo(0, height + 500)

              try {
                const fn = eval(cb)
                if (typeof fn === 'function') fn()
              } catch (e) {
                console.log(e)
              }
            }, `${cb}`)
          })
        })

      console.log('开始加载网页数据...')
      await loadAll() // 加载全部页面 没有请求2秒后停止
      console.log('网页数据加载完毕！')

      // 获取图片地址
      const data = await page.$$eval('img', imgs => {
        let imgUrlList = []
        imgs.forEach(img => {
          const property = [...img.attributes] // 将img的属性转换为数组
          property.forEach(({ value }) => value.slice(0, 9).includes('//') && imgUrlList.push(value)) // 判断是否是url
        })
        return [...new Set(imgUrlList)].filter(i => i.indexOf('.svg', i.length - 9) == -1) // 去重
      })

      // 关闭浏览器
      await browser.close()
      const results = data.map(url => (/^http/.test(url) ? url : `https:${url}`)) // 判断是否是https协议
      return results // 返回结果
    } catch (e) {
      // 关闭浏览器
      console.log(e)
      await browser.close()
    }
  }

  // 尝试下载
  try {
    const urlList = await getImgUrl(url) // 获取图片下载地址列表
    await fs.access(dir).catch(() => fs.mkdir(dir, { recursive: true })) // 创建目录

    // 数组分片方法
    const slicing = (arr, count) => {
      if (!Array.isArray(arr)) throw new Error('arr must be an Array')
      if (typeof count !== 'number' || count < 1) throw new Error('count must be a number')

      let list = []
      for (let i = 0; i < arr.length; i += count) {
        list.push(arr.slice(i, i + count))
      }
      return list
    }

    // 下载列表
    const list = slicing(urlList, count)
    // 下载结果
    const results = []

    console.log(`${urlList.length}张照片待下载...`)
    const startTime = new Date() // 开始时间

    // 开始分片下载
    for (let i = 0; i < list.length; i++) {
      console.log(`开始下载 -> ${(i + 1) * count}`)
      const downloadList = list[i].map((item, index) => {
        // 文件名
        const filename = (new Array(10).join('0') + (i * count + index)).slice(-6) + '.jpg'
        return Promise.retry(download, [item, dir, filename])
      })
      const res = await Promise.allSettled(downloadList)
      results.push(...res)
    }

    // 输出下载结果
    results.forEach(({ value, reason }) => console.log(value || reason))

    // 输出结束时间
    const endTime = new Date() // 结束时间
    console.log('下载完成 -> 耗时:' + (endTime - startTime) / 1000 + 's') // 耗时
  } catch (e) {
    console.error(e)
  }
}

// const url =
//   'https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1652366997889_R&pv=&ic=&nc=1&z=&hd=&latest=&copyright=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&dyTabStr=MCwzLDEsNCw1LDcsOCwyLDYsOQ%3D%3D&ie=utf-8&sid=&word=%E9%A3%8E%E6%99%AF'

const url = 'https://www.vcg.com/sets/516942437'

const dir = path.join(__dirname, 'imgs/img1') // 图片存储目录

// 第一个参数 要爬取网站的地址
// 第二个参数 图片存储目录
// 第三个参数 分片下载数量
// 第四个参数 回调函数用于浏览器操作
imgDownloader(url, dir, 200, () => {
  const dom = document.querySelector('.jss50')
  dom && dom.click()
})