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

JerryWangSAP 发布于2019-08-21 12:00 / 1531人阅读

摘要：首先介绍是一个库，他提供了一组用来操纵的默认也就是无的，也可以配置为有有点类似于，但是官方团队进行维护的，前景更好。使用，相当于同时具有和的能力，应用场景会非常多。

首先介绍Puppeteer

Puppeteer是一个node库，他提供了一组用来操纵Chrome的API（默认headless也就是无UI的chrome，也可以配置为有UI）

有点类似于PhantomJS，但Puppeteer是Chrome官方团队进行维护的，前景更好。

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

Puppeteer官方文档请猛戳这里

Puppeteer 核心功能

利用网页生成PDF、图片

爬取SPA应用，并生成预渲染内容（即“SSR” 服务端渲染）

可以从网站抓取内容

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

帮你创建一个最新的自动化测试环境（chrome），可以直接在此运行测试用例

捕获站点的时间线，以便追踪你的网站，帮助分析网站性能问题

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

使用puppeteer.launch()运行puppeteer，他会return一个promise，使用then方法获取browser实例，Browser API猛击这里

拿到browser实例后，通过browser.newPage()方法，可以得到一个page实例，猛戳 Page API

使用page.goto()方法，跳转至ES6标准入门

在page.evaluate()方法中注册回调函数，并分析dom结构，从下图可以进行详细分析，并通过document.querySelectorAll("ol li a")拿到文章的所有链接

拿到所有链接之后，依次爬取各个页面（也可以promise all同时抓取多个页面），使用page.pdf()方法打印当前页面

核心代码如下

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();
});

完整代码访问 Github

https://github.com/zhentaoo/p...

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

如果在page go之后马上进行pdf抓取，此时页面还未完成渲染，只能抓到loading图（如下），所以用timeout做了简单点处理

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87335.html

Puppeteer 初探

摘要：抓取并生成预先呈现的内容即。自动表单提交，测试，键盘输入等。创建一个最新的自动化测试环境。使用最新的的和浏览器功能，直接在最新版本的浏览器中运行测试。捕获您网站的时间线跟踪，以帮助诊断性能问题。木偶 Puppeteer 更友好的 Headless Chrome Node API木偶也是有心的 (=･ω･=) showImg(https://segmentfault.com/img/b...

oysun 2019-08-22 18:14 评论0 收藏0
使用Node.js爬取任意网页资源并输出高质量PDF文件到本地~

摘要：上面只爬取了京东首页的图片内容，假设我的需求进一步扩大，需要爬取京东首页中的所有标签对应的跳转网页中的所有的文字内容，最后放到一个数组中。 showImg(https://segmentfault.com/img/bVbtVeV?w=3840&h=2160); 本文适合无论是否有爬虫以及Node.js基础的朋友观看~ 需求：使用Node.js爬取网页资源，开箱即用的配置将爬取到的...

seasonley 2019-08-30 11:12 评论0 收藏0
使用Node.js爬取任意网页资源并输出高质量PDF文件到本地~

摘要：上面只爬取了京东首页的图片内容，假设我的需求进一步扩大，需要爬取京东首页中的所有标签对应的跳转网页中的所有的文字内容，最后放到一个数组中。 showImg(https://segmentfault.com/img/bVbtVeV?w=3840&h=2160); 本文适合无论是否有爬虫以及Node.js基础的朋友观看~ 需求：使用Node.js爬取网页资源，开箱即用的配置将爬取到的...

xiaoxiaozi 2019-08-02 15:18 评论0 收藏0
使用Node.js爬取任意网页资源并输出高质量PDF文件到本地~

摘要：上面只爬取了京东首页的图片内容，假设我的需求进一步扩大，需要爬取京东首页中的所有标签对应的跳转网页中的所有的文字内容，最后放到一个数组中。 showImg(https://segmentfault.com/img/bVbtVeV?w=3840&h=2160); 本文适合无论是否有爬虫以及Node.js基础的朋友观看~ 需求：使用Node.js爬取网页资源，开箱即用的配置将爬取到的...

wangym 2019-08-23 18:07 评论0 收藏0