21xrx.com
2024-11-22 05:54:58 Friday
登录
文章检索 我的文章 写文章
puppeteer 实现爬虫
2021-06-03 09:16:14 深夜i     --     --
前端 puppeteer es6 爬虫 nodejs

 

puppeteer 实现爬虫(windows)

 

因为puppeteer中大量api都是异步函数,所以首先需要对异步函数async/await有一定的了解,await会暂停当前async函数的执行,等待后面的Promise的计算结果返回以后再继续执行,也就是说程序会在这停止,直到到await后面的函数有返回才继续执行,但是前提是返回必须是一个Promise对象,也就是await只对函数有返回Promise对象时才进行等待,其他情况不进行等待。

 

①首先安装一下puppeteer
因为安装Chromium十分的慢浪费时间,所以建议跳过该步骤
npm i --save puppeteer --ignore-scripts
②手动安装Chromium
贴上下载网址:https://www.chrome64bit.com/index.php/chromium-64-bit-for-windows
下载时候安装之后就是一个文件夹。
③安装完成之后启用Chromium,这里headless控制是否弹出浏览器,executablePath,指定Chromium的安装位置

 

const puppeteer = require('puppeteer');
const browser = await puppeteer.launch({
    headless: false,
    executablePath: 'C:\\Users\\lenovo\\AppData\\Local\\Chromium\\Application\\chrome.exe',   //指定chromium浏览器位置;  
 });

 

④启用Chromium之后,访问百度图片网址,模拟搜索关键字并查询的操作,查询的时候起初使用的,page.click(‘selector’),模拟点击,但是发现click函数总是报Error: Node is either not visible or not an HTMLElement。

 

  await page.click('.s_btn');

 

在这里插入图片描述

 

 

检查网页元素发现,按钮的display属性是none,因此获取不到
在这里插入图片描述

 

 

 

 

 

 

 

因此最后使用DOM的方法获取,利用的page.evaluate()方法。

 

await page.evaluate(() => {
    document.querySelector('.s_btn').click()
});

 

⑤查询关键字之后,将网页中所有的img标签匹配,并获取图片的src地址,并交由srcToImg函数进行处理。代码如下所示。

 

const puppeteer = require('puppeteer');
const {mn} = require('../config/defualt');
const srcToImg = require('../helper/srcToImg');
(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        executablePath: 'C:\\Users\\lenovo\\AppData\\Local\\Chromium\\Application\\chrome.exe',   //指定chromium浏览器位置;  
    });
    const page = await browser.newPage();
    await page.setViewport({width: 1000, height: 1000, deviceScaleFactor: 1,});
    console.log('reset viewPort');
    await page.goto('http://image.baidu.com/');
    console.log("go to https://image.baidu.com/");
    await page.focus('#kw');
    await page.keyboard.sendCharacter("狗");
    await page.evaluate(() => {
        document.querySelector('.s_btn').click()
    });
    console.log('go to search list');
    page.on('load', async () => {
        console.log('page loading done, start fetch...');
        const srcs = await page.evaluate(() => {
            const image = document.querySelectorAll('img.main_img');
            return Array.prototype.map.call(image, img => img.src)
        });
        srcs.forEach(src => {
            srcToImg(src, mn);
        });
        console.log("finish");
        await browser.close();
    })
})()

 

⑥srcToImg函数具体实现

 

const fs = require('fs');
const {promisify} = require('util');
const http = require('http');
const https = require('https');
const path = require('path');
const writeFile = promisify(fs.writeFile);
module.exports = async (src, dir) => {
    if (/\.(jpg|png|git)$/.test(src)) {
        await urlToImg(src, dir);
    } else {
        await base64ToImg(src, dir);
    }
}
//url -> imgconst
urlToImg = promisify((url, dir, callback) => {
    const mod = /^https:/.test(url) ? https : http;
    const ext = path.extname(url);
    const file = path.join(dir, `${Date.now()}${ext}`);
    mod.get(url, res => {
        res.pipe(fs.createWriteStream(file)).on('finish', () => {
            callback();
            console.log(file);
        })
    })
})
//base64 -> imgconst 
base64ToImg = async function (base64Str, dir) {  //data:image/jpeg:base64,/sssss  
    const matches = base64Str.match(/^data:(.+?);base64,(.+)/);
    try {
        const ext = matches[1].split('/')[1].replace('jpeg', 'jpg');
        const file = path.join(dir, `${Date.now()}.${ext}`);
        await writeFile(file, matches[2], 'base64');
        console.log(file);
    } catch (error) {
        console.log(error);
        console.log('非法 base64字符串')
    }
}

 

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
    相似文章