nodejs cheerio 获取网页html 解析获取img 的 src标签 并下载

const cheerio = require('cheerio');     // 爬虫
const fs = require('fs');               // 用于操作文件（文件下载到本地）
const axios = require('axios');         // 用于发送请求
const cmd = require('node-cmd');        // 用于执行 dos 命令

const targetURL = 'https://www.xxx.com/?s=xxx';

// 请求目标网页
function getTarget(url) {
    // 将指定的网页请求回来
    axios.get(url ? url : targetURL).then(res => {
        // console.log('res',res);

        // 爬取 img 资源
        cheerioAction(res.data);
    }).catch(err => {
        console.log(err);
    })
}


// 爬出所有图片的src
function cheerioAction(HtmlData) {
    // 加载当前网页资源
    const $ = cheerio.load(HtmlData);
    // 获取到所有 li > a > img 标签
    /* 
        arr 是一个对象，设获取到的img有2项，则可用的资源为
        {
            '0':{第一个img元素相关的内容},
            '1':{第二个img元素相关的内容},
            ...
        }
    */
    let arr = $('img');
    // console.log('arr',arr[2].attribs['data-src']);
    // return
    let srcArr = [];
    for (let i = 0; i < arr.length; i++) {
        // 把 img 元素中的 src 内容提取出来，加入到数组中
        arr[i].attribs['data-src'] && srcArr.push(arr[i].attribs['data-src']);
    }
    console.log('srcArr', srcArr);

    // 创建一个新的目录，然后开始下载图片到该目录下
    createDir((dir) => {
        downloadImg(srcArr, dir, 0);
    });
}
let pageIndex = 1
// 创建一个文件夹专门存放图片
function createDir(callback) {

    // 使用当前时间戳来命名文件夹
    let time = new Date().getTime();
    let dir = './' + time + '-' + pageIndex;
    fs.mkdir(dir, (err) => {

        // 创建文件夹成功
        if (!err) {

            // 执行cmd命令，打开资源管理器到该文件夹目录下，观察图片下载
            // cmd.run(`Explorer /root,${process.cwd()}\\${time}`,(err, data, stderr)=>{
            //     if(err){
            //         console.log(err);
            //     }
            // })

            // 回调函数，下载图片到指定文件夹中
            callback(dir);
        } else {
            console.log('make dir fail');
        }
    })
}


// 批量下载图片到指定文件夹中
function downloadImg(srcArr, dir, index) {
    let url = srcArr[index];

    if (!url) {
        downloadImg(srcArr, dir, index + 1)
    }
    console.log('url', url);
    axios.get(url, {
        // 设置返回的类型是二进制
        responseType: 'arraybuffer',
    }).then(res => {
        // 下载当前图片文件到文件夹中
        fs.writeFile(`${dir}/${index}.png`, res.data, 'binary', (err) => {
            if (err) {
                console.log(`${index} error`, err);
            } else {
                console.log(`${index} finish`);
                console.log('srcArr.length', srcArr.length);

                if (index <= srcArr.length - 2) {
                    // 如果还有图片资源，则继续下载
                    downloadImg(srcArr, dir, index + 1)

                } else {
                    console.log('all picture download finished');
                    pageIndex++
                    if (pageIndex > 30) return
                    setTimeout(() => {
                        let pageUrl = `https://www.xxx.com/page/${pageIndex}/?s=xxx`
                        getTarget(pageUrl);
                    }, 5000)
                }
            }
        })

    })

    //---------------------------
    // fetch(url, {
    //     method: 'GET',
    //     responseType: 'arraybuffer',
    // }).then(res => {
    //     // 下载当前图片文件到文件夹中
    //     fs.writeFile(`${dir}/${index}.png`, res.data, 'binary', (err) => {
    //         if (err) {
    //             console.log(`${index} error`, err);
    //         } else {
    //             console.log(`${index} finish`);
    //             console.log('srcArr.length', srcArr.length);

    //             if (index <= srcArr.length - 2) {
    //                 // 如果还有图片资源，则继续下载
    //                 downloadImg(srcArr, dir, index + 1)

    //             } else {
    //                 console.log('all picture download finished');
    //                 pageIndex++
    //                 if (pageIndex > 30) return
    //                 setTimeout(() => {
    //                     let pageUrl = `https://www.xxx.com/page/${pageIndex}/?s=xxx`
    //                     getTarget(pageUrl);
    //                 }, 5000)
    //             }
    //         }
    //     })

    // })
}

getTarget();