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

首先介绍Puppeteer

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

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

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

Puppeteer官方文档请猛戳这里

Puppeteer 核心功能

1. 利用网页生成PDF、图片
2. 爬取SPA应用，并生成预渲染内容（即“SSR” 服务端渲染）
3. 能够从网站抓取内容
4. 自动化表单提交、UI测试、键盘输入等
5. 帮你建立一个最新的自动化测试环境（chrome），能够直接在此运行测试用例
6. 捕获站点的时间线，以便追踪你的网站，帮助分析网站性能问题

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

1. 使用puppeteer.launch()运行puppeteer，他会return一个promise，使用then方法获取browser实例，Browser API猛击这里
2. 拿到browser实例后，经过browser.newPage()方法，能够获得一个page实例， 猛戳 Page API
3. 使用page.goto()方法，跳转至ES6标准入门
4. 在page.evaluate()方法中注册回调函数，并分析dom结构，从下图能够进行详细分析，并经过document.querySelectorAll('ol li a')拿到文章的全部连接
5. 拿到全部连接以后，依次爬取各个页面（也能够promise all同时抓取多个页面），使用page.pdf()方法打印当前页面

6. 核心代码以下

   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很粗糙，应该不会对阮老师产生什么影响，若有问题能够第一时间联系我....