做一个Javascript网页爬虫

前言

puppeteer的出现让其他的JavaScript脚本写的爬虫程序黯然失色，puppeteer的是Google团队开发的一款针对chrome浏览器的性能极强的爬虫程序，本文中的主要内容便是基于puppeteer实现一个简单的爬虫程序，实例代码主要是爬取百度的高清壁纸，并自动化的保存到本地磁盘。

系统环境要求

NodeJS、可以使用npm、puppeteer

1、安装NodeJS

2、安装puppeteer，使用npm安装时会出现错误，主要是因为国内暂不支持chormize的下载，需要翻墙才可以；所以采用第二种办法，先使用npm安装阿里云的cnpm，命令如下

1
$ npm install cnpm -g

然后使用cnpm安装puppeteer即可，代码如下

1
$ cnpm install puppeteer -g

代码编写

1、初始化项目，首先建立空文件夹，在该目录下的控制台键入命令

1
$ npm init -y

2、此时文件目录中应该包括了package.json文件，由于全局安装了puppeteer，所以此时无须再次安装；若不想全局安装，则执行以下命令即可（生产环境可用）

1
$ cnpm install puppeteer -S

3、准备工作完成了即可以编写核心的爬虫代码了，本实例代码只为了验证爬虫的执行，就不进行结构化书写代码了，绝大部分的代码只包含在一个文件中即可，方便大家理解；为了将爬取的内容保存下来，在根目录下新建一个download文件夹；然后在根目录下新建一个main.js文件，文件内容编写代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
const puppeteer = require('puppeteer');
const path = require('path');
const dir = path.resolve(__dirname,"../download");
const fs = require('fs');

(async ()=>{
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto("http://www.baidu.com",{waitUntil:'networkidle2'});
    console.log("loading...");

    await page.setViewport({
        width:1920,
        height:5080
    });
    console.log("set Viewport done.");

    const s_def = "武侠小说";
    await page.type("#kw",s_def);
    await page.click("#su");
    await page.waitFor(2000);  //必须等待，否则浏览器不能正确刷新页面。
    console.log('Search input has done.');

    const file_pdf = path.join(dir,`${Date.now()}.pdf`);
    const file_png = path.join(dir,`${Date.now()}.png`);
    const file_txt = path.join(dir,`${Date.now()}.txt`);
    const file_md = path.join(dir,`${Date.now()}.md`);

    await page.pdf({
            path:file_pdf,
            format:"letter"
    });
    await page.screenshot({path:file_png,fullscreen:true});
    console.log("PDF and screenCapture has Process done.");

    await page.waitFor(".c-container");

    const selector = ".c-container h3 a";
    const text_content = await page.$$eval(selector,anchors=>anchors.map(anchor=>{
        const title = anchor.innerHTML.trim();
        const href = anchor.getAttribute("href");
        return `${title}---${href}`;
    }));

    text_content.map(text=>{fs.appendFile(file_txt, text+"\n", (err) => {
        if (err) throw err;
        console.log('The "data" was appended to file!');
    })});

    const writer = fs.createWriteStream(file_md,(err)=>{if(err) throw err;});
    text_content.map(text=>writer.write(text+"\n\n",(err)=>{
        if(err) throw err;
        console.log("mdFile has download.");
    }));

   await browser.close();
})();

4、执行代码，在命令行键入

1
$ node main.js

5、此时打开download目录即可看到从百度搜索中爬取到的内容了。

结尾

简单的一个写爬虫的代码，很容易实现，如需了解更多有关puppeteer的详细内容，直接到GitHub上搜索puppeteer即可，本人主要是兴趣使然，刚开始研究这玩意，也欢迎大家有问题一起交流，项目代码地址Github。