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

一、puppeteer 是什么？

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

官方介绍：

您能够在浏览器中手动执行的大多数操做均可以使用 Puppeteer完成！

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

二、爬取网站生成PDF

2.1 安装 puppeteer

// 安装 puppeteer
// 可能会由于网络缘由安装失败，可以使用淘宝镜像 
// npm install -g cnpm --registry=https://registry.npm.taobao.org
npm i puppeteer
# or "yarn add puppeteer"

2.2 《React.js小书》简介

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

2.3 一些可能会用到的 puppeteer API

// 新建 reactMiniBook.js, 运行 node reactMiniBook.js 生成pdf
const 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);
// 等待2s
await page.waitFor(2000);

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

2.4 知道了以上这些API后，就能够开始写主程序了。

简单说下：实现功能和主流程。从上面React.js小书截图来看。
一、打开浏览器，进入目录页，生成0. React 小书 目录.pdf
二、跳转到1. React.js 简介页面，获取左侧全部的导航a连接的href,标题。
三、用获取到的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

四、关闭浏览器

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

// node 执行这个文件
// 笔者这里是：
node src/puppeteer/reactMiniBook.js

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

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

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

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

这个pdf-merge依赖 pdftk

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

Debian, Ubuntu 安装
笔者在Ubuntu系统安装后，便可使用。
apt-get install pdftk

使用例子

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

const files = [
    `${__dirname}/1.pdf`,
    `${__dirname}/2.pdf`,
];

// Buffer (Default)
PDFMerge(files)
.then((buffer) => {...});

// Stream
PDFMerge(files, {output: 'Stream'})
.then((stream) => {...});

// 笔者这里使用的是这个
// Save as new file
PDFMerge(files, {output: `${__dirname}/3.pdf`})
.then((buffer) => {...});

知道这些后，能够开始写主程序了。
简单说下主流程
一、读取到生成的全部pdf文件路径，并排序（0-46）
二、判断下输出文件夹是否存在，不存在则建立
三、合并这些小节的pdf保存到新文件 React小书（完整版）-做者：胡子大哈-时间戳.pdf

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

最终合并的pdf文件在这里React小书（完整版）-做者：胡子大哈，可供下载。

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

小结

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

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

关于

做者：常以轩辕Rowboat若川为名混迹于江湖。前端路上 | PPT爱好者 | 所知甚少，惟善学。
我的博客
segmentfault前端视野专栏，开通了前端视野专栏，欢迎关注
掘金专栏，欢迎关注
知乎前端视野专栏，开通了前端视野专栏，欢迎关注
github，欢迎follow~