前端使用puppeteer 爬虫生成《React.js 小书》PDF并合并 _生成

前端也可以爬虫，写于2018年08月29日，现在发布到微信公众号申明原创。
掘金@若川本文章链接：
1、是什么？
:官方出品的node 库
仓库
API
官方介绍：
您可以在浏览器中手动执行的大多数操作都可以使用完成！
生成页面的屏幕截图和 PDF 。
抓取 SPA并生成预渲染内容（即“ SSR”）。
自动化表单提交，UI测试，键盘输入等。
创建最新的自动化测试环境。使用最新的和浏览器功能直接在最新版本的中运行测试。
捕获时间线跟踪您的网站，以帮助诊断性能问题。
测试扩展程序。
2、爬取网站生成PDF 2.1 安装
# 安装 puppeteer# 可能会因为网络原因安装失败，可使用淘宝镜像# npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm i puppeteer# or "yarn add puppeteer"
2.2 《React.js小书》简介
【前端使用puppeteer 爬虫生成《React.js 小书》PDF并合并】《 React.js小书》简介
关于作者@胡子大哈
这是?本关于 React.js 的?书。因为?作中?直在使? React.js，也?直以来想总结?下??关于 React.js 的?些知识、经验。于是把?些想法慢慢整理书写下来，做成?本开源、免费、专业、简单的??级别的?书，提供给社区。希望能够帮助到更多 React.js 刚??朋友。
下图是《 React.js 小书》部分截图：

文章插图
2.3 一些可能会用到的 API

// 新建 reactMiniBook.js, 运行 node reactMiniBook.js 生成pdfconst puppeteer = require('puppeteer');(async () => {// 启动浏览器const browser = await puppeteer.launch({// 无界面 默认为true,改成false,则可以看到浏览器操作，目前生成pdf只支持无界面的操作 。// headless: false,// 开启开发者调试模式，默认false, 也就是平时F12打开的面版// devtools: true,});// 打开一个标签页const page = await browser.newPage();// 跳转到页面 http://huziketang.mangojuice.top/books/react/await page.goto('http://huziketang.com/books/react/', {waitUntil: 'networkidle2'});// path 路径，format 生成pdf页面格式await page.pdf({path: 'react.pdf', format: 'A4'});// 关闭浏览器await browser.close();})();

知道这启动浏览器打开页面关闭浏览器主流程后，再来看几个 API 。

const args = 1;let wh = await page.evaluate((args) => {// args 可以这样传递给这个函数 。// 类似于 setTimeout(() => {console.log(args);}, 3000, args);console.log('args', args); // 1// 这里可以运行 dom操作等js// 返回通过dom操作等获取到的数据return {width: 1920,height: document.body.clientHeight,};}, args);// 设置视图大小await page.setViewport(wh);// 等待2sawait page.waitFor(2000);

// 以iPhone X执行 。const devices = require('puppeteer/DeviceDescriptors');const iPhone = devices['iPhone X'];await page.emulate(iPhone);

2.4 知道了以上这些API后，就可以开始写主程序了。
简单说下：实现功能和主流程。从上面 React.js小书截图来看。
1、打开浏览器，进入目录页，生成 0.React小书目录.pdf
2、跳转到 1.React.js简介页面，获取左侧所有的导航 a链接的 href，标题。

文章插图
3、用获取到的 a链接数组进行 for循环，这个循环里主要做了如下几件事：
3.1 隐藏左侧导航，便于生成 pdf
3.2 给 React.js简介等标题加上序号，便于查看