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