Puppeteer初探–爬取并生成《ES6标准入门》PDF


首先介绍Puppeteer

Puppeteer是一个node包,他提供了用来控制Chrome的高级API,有点类似于PhantomJS,但Puppeteer是Chrome官方团队进行维护的,前景更好。

使用Puppeteer,相当于同时具有Linux和Chrome的双端操作能力,应用场景会非常多。就爬虫领域来说,远比一般的爬虫工具功能更丰富,性能分析也不在话下,今天先探讨爬虫相关

Puppeteer官方文档请猛戳这里

Puppeteer 核心功能

  1. 用网页生成的PDF文件

  2. 爬取 SPA应用 并生成预渲染内容(即“SSR”)

  3. 从网站抓取内容

  4. 自动化表单提交、UI测试、键盘输入等。

  5. 创建一个最新的自动化测试环境。直接在

  6. 使用最新的JavaScript和最新版本Chrome。

  7. 捕获站点的时间线跟踪,以帮助诊断性能问题。

OK,基本熟悉之后,接下来进行爬虫教学:

  1. 还是强调一下,先通读一遍文档,了解大致有哪些API

  2. 使用page goto 页面跳转到http://es6.ruanyifeng.com/#README

  3. 分析左侧导航栏:document.querySelectorAll(‘ol li a’),可以拿到所有链接

  4. 使用puppeteer提供的api进行PDF打印,代码如下很简洁

  5. Git Repo: https://github.com/zhentaoo/puppeteer-deep

puppeteer.launch().then(async browser => {
    let page = await browser.newPage();

    await page.goto('http://es6.ruanyifeng.com/#README');
    await timeout(2000);

    let aTags = await page.evaluate(() => {
      let as = [...document.querySelectorAll('ol li a')];
      return as.map((a) =>{
          return {
            href: a.href.trim(),
            name: a.text
          }
      });
    });

    await page.pdf({path: `./es6-pdf/${aTags[0].name}.pdf`});
    page.close()

    // 这里也可以使用promise all,但cpu可能吃紧,谨慎操作
    for (var i = 1; i < aTags.length; i++) {
      page = await browser.newPage()
      var a = aTags[i];
      await page.goto(a.href);
      await timeout(2000);
      await page.pdf({path: `./es6-pdf/${a.name}.pdf`});
      page.close();
    }

    browser.close();
});

效果如下,这里简述几个需要注意的问题:

如果在page go完成之后马上对page进行dom操作只能抓到loading,所以用timeout做了简单点处理

Puppeteer初探--爬取并生成《ES6标准入门》PDF

最终爬取效果如下,PDF的尺寸、预览效果、首页重复就不做过多整理, 预览效果如下,如果想要自己处理,可以设置一下chrome尺寸,打印页数

Puppeteer初探--爬取并生成《ES6标准入门》PDF
Puppeteer初探--爬取并生成《ES6标准入门》PDF

最后声明,生成的PDF很粗糙,应该不会对阮老师产生什么影响,如有问题可以第一时间联系我….


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>