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

前端也可以爬虫，写于2018年08月29日，现在发布到微信公众号申明原创。

掘金@若川 本文章链接：https://juejin.im/post/5b86732451882542af1c8082

1、 puppeteer 是什么？

puppeteer: Google 官方出品的 headless Chrome node 库
puppeteer github仓库
puppeteer API

官方介绍：

您可以在浏览器中手动执行的大多数操作都可以使用 Puppeteer完成！

生成页面的屏幕截图和 PDF。
抓取 SPA并生成预渲染内容（即“ SSR”）。
自动化表单提交， UI测试，键盘输入等。
创建最新的自动化测试环境。使用最新的 JavaScript和浏览器功能直接在最新版本的 Chrome中运行测试。
捕获时间线跟踪 您的网站，以帮助诊断性能问题。
测试 Chrome扩展程序。

2、爬取网站生成 PDF

2.1 安装 puppeteer

1. # 安装 puppeteer

2. # 可能会因为网络原因安装失败，可使用淘宝镜像

3. # npm install -g cnpm --registry=https://registry.npm.taobao.org

4. npm i puppeteer

5. # or "yarn add puppeteer"

2.2 《 React.js小书》简介

《 React.js小书》简介
关于作者@胡子大哈
这是⼀本关于 React.js 的⼩书。因为⼯作中⼀直在使⽤ React.js，也⼀直以来想总结⼀下⾃⼰关于 React.js 的⼀些 知识、经验。于是把⼀些想法慢慢整理书写下来，做成⼀本开源、免费、专业、简单的⼊⻔级别的⼩书，提供给社区。希望能够帮助到更多 React.js 刚⼊⻔朋友。
下图是《 React.js 小书》部分截图：

2.3 一些可能会用到的 puppeteer API

1. // 新建 reactMiniBook.js, 运行 node reactMiniBook.js 生成pdf

2. const puppeteer = require('puppeteer');

3. (async () => {

4. // 启动浏览器

5. const browser = await puppeteer.launch({

6. // 无界面 默认为true,改成false,则可以看到浏览器操作，目前生成pdf只支持无界面的操作。

7. // headless: false,

8. // 开启开发者调试模式，默认false, 也就是平时F12打开的面版

9. // devtools: true,

10. });

11. // 打开一个标签页

12. const page = await browser.newPage();

13. // 跳转到页面 http://huziketang.mangojuice.top/books/react/

14. await page.goto('http://huziketang.com/books/react/', {waitUntil: 'networkidle2'});

15. // path 路径， format 生成pdf页面格式

16. await page.pdf({path: 'react.pdf', format: 'A4'});

17. // 关闭浏览器

18. await browser.close();

19. })();

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

1. const args = 1;

2. let wh = await page.evaluate((args) => {

3. // args 可以这样传递给这个函数。

4. // 类似于 setTimeout(() => {console.log(args);}, 3000, args);

5. console.log('args', args); // 1

6. // 这里可以运行 dom操作等js

7. // 返回通过dom操作等获取到的数据

8. return {

9. width: 1920,

10. height: document.body.clientHeight,

11. };

12. }, args);

13. // 设置视图大小

14. await page.setViewport(wh);

15. // 等待2s

16. await page.waitFor(2000);

1. // 以iPhone X执行。

2. const devices = require('puppeteer/DeviceDescriptors');

3. const iPhone = devices['iPhone X'];

4. 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简介等标题 加上序号，便于查看
3.3 设置 docment.title 加上序号, 便于在页眉中使用。
3.4 隐藏 传播一下知识也是一个很好的选择 这一个模块（因为页眉页脚中设置了书的链接等信息，就隐藏这个了）
3.5 给 分页 上一节，下一节加上序号，便于查看。
3.6 最末尾声明下该 pdf的说明，仅供学习交流，严禁用于商业用途。
3.7 返回宽高，用于设置视图大小
3.8 设置视图大小，创建生成 pdf

4、关闭浏览器

具体代码：可以查看这里爬虫生成《React.js小书》的 pdf每一小节的代码

1. // node 执行这个文件

2. // 笔者这里是：

3. node src/puppeteer/reactMiniBook.js

即可生成如下图：每一小节（0-46小节）的 pdf

生成这些后，那么问题来了，就是查看时总不能看一小节，打开一小节来看，这样很不方便。
于是接下来就是合并这些 pdf成为一个 pdf文件。

3、合并成一个PDF文件 pdf-merge

起初，我是使用在线网站Smallpdf，合并 PDF。合并的效果还是很不错的。这网站还是其他功能。比如 word转 pdf等。
后来找到社区提供的一个 npm packagepdf merge。(毕竟笔者是写程序的，所以就用代码来实现合并了)

这个 pdf-merge依赖 pdftk

安装 PDFtk
Windows
下载并安装
笔者安装后，重启电脑才能使用。

Debian, Ubuntu 安装
笔者在Ubuntu系统安装后，即可使用。
apt-getinstall pdftk

使用例子

1. const PDFMerge = require('pdf-merge');

2. const files = [

3. `${__dirname}/1.pdf`,

4. `${__dirname}/2.pdf`,

5. ];

6. // Buffer (Default)

7. PDFMerge(files)

8. .then((buffer) => {...});

9. // Stream

10. PDFMerge(files, {output: 'Stream'})

11. .then((stream) => {...});

12. // 笔者这里使用的是这个

13. // Save as new file

14. PDFMerge(files, {output: `${__dirname}/3.pdf`})

15. .then((buffer) => {...});

知道这些后，可以开始写主程序了。
简单说下主流程
1、读取到生成的所有 pdf文件路径，并排序（0-46）
2、判断下输出文件夹是否存在，不存在则创建
3、合并这些小节的 pdf保存到新文件 React小书（完整版）-作者：胡子大哈-时间戳.pdf

具体代码：可以查看这里爬虫生成《React.js小书》的 pdf合并 pdf的代码

最终合并的pdf文件可供下载。百度网盘链接: https://pan.baidu.com/s/107WNpJqHbBPxAGsXS51u5A 提取码: m4nd。github下载链接：React小书（完整版）-作者：胡子大哈。

本想着还可以加下书签和页码，没找到合适的生成方案，那暂时先不加了。如果读者有好的方案，欢迎与笔者交流。

小结

1、 puppeteer是 Google 官方出品的 headless Chrome node库，可以在浏览器中手动执行的大多数操作都可以使用 Puppeteer完成。总之可以用来做很多有趣的事情。
2、用 puppeteer 生成每一小节的 pdf，用依赖 pdftk的 pdf-merge npm包, 合并成一个新的 pdf文件。或者使用Smallpdf等网站合并。
3、《 React.js小书》，推荐给大家。爬虫生成 pdf，应该不会对作者@胡子大哈有什么影响。作者写书服务社区不易，尽可能多支持作者。

最后推荐几个链接，方便大家学习 puppeteer。
puppeteer入门教程
Puppeteer 初探之前端自动化测试
爬虫生成ES6标准入门 pdf
大前端神器安利之 Puppeteer
puppeteer API中文文档

关于

作者：常以若川为名混迹于江湖。前端路上 | PPT爱好者 | 所知甚少，唯善学。
个人博客 https://lxchuan12.cn/posts 使用 vuepress重构了，阅读体验可能更好些
https://github.com/lxchuan12/blog，相关源码和资源都放在这里，求个 star^_^~

微信交流群，加我微信lxchuan12，注明来源，拉您进前端视野交流群

下图是公众号二维码：若川视野，一个可能比较有趣的前端开发类公众号，目前前端内容不多

往期文章

由于公众号限制外链，点击阅读原文，或许阅读体验更佳，觉得文章不错，可以点个在看呀^_^