爬取并打印《ES6标准入门》PDF--Puppeteer初探

原文链接：http://zhentaoo.com/2017/10/22/Puppeteer/

首先介绍Puppeteer

Puppeteer是一个node库，他提供了一组用来操纵Chrome的API，理论上使用它可以做任何Chrome可以做的事有点类似于PhantomJS，但Puppeteer由Chrome官方团队进行维护，前景更好Puppeteer的应用场景会非常多，就爬虫领域来说，远比一般的爬虫工具功能更丰富，性能分析、自动化测试也不在话下，今天先探讨爬虫相关Puppeteer官方文档请猛戳这里

Puppeteer 核心功能

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

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

1.运行Puppeteer

puppeteer.launch().then(async browser => { ...... what you want ...... })

2.跳转至 阮一峰老师的ES6博客

let page = await browser.newPage(); await page.goto('http://es6.ruanyifeng.com/#README');

3.分析博客左侧导航栏的dom结构，并拿到所有链接的href、title信息

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

4.使用Puppeteer打印当前页面的PDF

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

5.完整代码在: https://github.com/zhentaoo/puppeteer-deep

6.项目运行 - git clone https://github.com/zhentaoo/puppeteer-deep - npm install (puppeteer在win下100+M、mac下70+M，请耐心等候) - npm run es6

最终效果如下，不过要注意几个问题：

如果在page go之后马上进行pdf抓取，此时页面还未完成渲染，只能抓到loading图（如下），所以需要用timeout做点简单处理 最终爬取效果如下，PDF的尺寸、预览效果、首页重复就不做过多整理， 预览效果如下,如果想要自己处理，可以设置一下chrome尺寸，打印页数