第一弹：puppeteer爬虫小demo —— 网易云音乐-CSDN博客

上一篇文章主要介绍了一些puppeteer爬虫api，本文是实战篇第一弹，爬取网易云音乐某个页面板块。

出发点

首先我不是要爬歌词，我只是想结合上一篇文章写一个练手小demo，内容随意。
这个demo最好可以涉及多媒体保存。
尽可能简单，不涉及数据库操作、删除文件操作。
限定网站是传统异步获取分页数据，没有分页参数在地址栏url上。

解决点

图片下载

之前写项目的时候习惯用axios，本文也是使用axios。axios(url, {responseType: "stream"})这样初始化axios就可以下载图片了。
图片位置

新建一个image文件夹来存储下载的图片 fs.mkdirSync("image");
分析网站结构
- 网易云音乐的主体由一个iframe包裹，iframe有name和id，用iframe.name()和Array.find可以匹配单个Frame对象。
- 每一行都是由一个tr组成
- 获取新数据可以模拟点击下一页实现

下面直接放代码

const fs = require("fs");
const puppeteer = require("puppeteer");
const axios = require("axios");
console.time("ssr"); //开始计时
if (!fs.existsSync("image")) {
//新建image文件夹
  fs.mkdirSync("image");
}

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    devtools: true
  });
  const page = (await browser.pages())[0];
  await page.setViewport({
    width: 1280,
    height: 800
  });
  //为了简化，我直接跳到想爬的地址了。当然你也可以打开网易云一步一步操作，注意规律就好了。
  await page.goto(
    "http://music.163.com/#/search/m/?id=9605&s=%E5%8D%AB%E5%85%B0&type=1000"
  );
  //Frame对象有一个获取name的方法
  let iframe = await page.frames().find(f => f.name() === "contentFrame");
  //这里我只获取前五页的数据，当然你也可以获取下一页的前一个元素的innerText来确认总数
  for (let i = 1; i <= 5; i++) {
    fs.mkdirSync(`image/${i}`); //页码作为文件夹名
    // await iframe.waitFor(".m-table td .s-fc3");
    // 等待分页数据。本来想通过上面的方式来等待的，但是貌似是因为上一个页面".m-table td .s-fc3"的节点已经加载
    //按下一页的时候这个选择器的节点还在，导致这个方式失效？请大佬解惑
    await iframe.waitFor(2000) //ps：少于2s，有时会出现图片重复，原因是dom仍未更新导致
    const te = await iframe.$$eval(".m-table tbody tr", list => {
    //请注意已经进入浏览器环境了
      return new Promise(resolve => {
        let arr = [];
        list.map((item, index) => {
          let temp = {};
          const str = item.querySelector(".w7 img").src;
          temp.img = str.slice(0, str.lastIndexOf("?")); //获取最大尺寸的图片
          temp.title = item.querySelector(".txt").innerText;
          temp.author = item.querySelector(".w4 a.s-fc3").title;
          temp.count = item.querySelector(".w6.s-fc4").innerText;
          //因为这是浏览器的环境，我在node依赖的axios是无法在这里下载文件的，只能先保存数据再回到node中下载
          // axios(temp.img,{responseType:'stream'}).then(response => response.data.pipe(fs.createWriteStream(`./image/${temp.author.jpg}`)))
          arr.push(temp);
        });
        resolve(arr);
      });
    });
    //回到node的环境，可以放心下载了。
    te.map(async (item, index) => {
      const result = await axios(item.img, {
        responseType: "stream"
      });
      result.data.pipe(fs.createWriteStream(`./image/${i}/${item.author}.jpg`)); //管道真好使
    });
    // 下载完图片进入下一页，如果有页码直接用goto跳转
    iframe.click('.u-page a:last-child')
  }

  console.timeEnd("ssr"); //计时结束
  })();
复制代码