1、puppeteer 是什么？puppeteer: Google 官方出品的 headless Chrome node 库puppeteer github仓库puppeteer API官方介绍：您可以在浏览器中手动执行的大多数操作都可以使用Puppeteer完成！生成页面的屏幕截图和PDF。抓取SPA并生成预渲染内容（即“SSR”）。自动化表单提交，UI测试，键盘输入等。创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能直接在最新版本的Chrome中运行测试。捕获时间线跟踪 您的网站，以帮助诊断性能问题。测试Chrome扩展程序。2、爬取网站生成PDF2.1 安装 puppeteer// 安装 puppeteer// 可能会因为网络原因安装失败，可使用淘宝镜像 // npm install -g cnpm –registry=https://registry.npm.taobao.orgnpm 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 生成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 小书 目录.pdf2、跳转到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 设置视图大小，创建生成pdf4、关闭浏览器具体代码：可以查看这里爬虫生成《React.js小书》的pdf每一小节的代码// node 执行这个文件// 笔者这里是：node src/puppeteer/reactMiniBook.js即可生成如下图：每一小节（0-46小节）的pdf生成这些后，那么问题来了，就是查看时总不能看一小节，打开一小节来看，这样很不方便。于是接下来就是合并这些pdf成为一个pdf文件。3、合并成一个PDF文件 pdf-merge起初，我是使用在线网站Smallpdf，合并PDF。合并的效果还是很不错的。这网站还是其他功能。比如word转pdf等。后来找到社区提供的一个npm packagepdf merge 。(毕竟笔者是写程序的，所以就用代码来实现合并了)这个pdf-merge依赖 pdftk安装 PDFtkWindows下载并安装笔者安装后，重启电脑才能使用。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) => {…});// StreamPDFMerge(files, {output: ‘Stream’}).then((stream) => {…});// 笔者这里使用的是这个// Save as new filePDFMerge(files, {output: ${__dirname}/3.pdf}).then((buffer) => {…});知道这些后，可以开始写主程序了。简单说下主流程1、读取到生成的所有pdf文件路径，并排序（0-46）2、判断下输出文件夹是否存在，不存在则创建3、合并这些小节的pdf保存到新文件 React小书（完整版）-作者：胡子大哈-时间戳.pdf具体代码：可以查看这里爬虫生成《React.js小书》的pdf合并pdf的代码最终合并的pdf文件在这里React小书（完整版）-作者：胡子大哈，可供下载。本想着还可以加下书签和页码，没找到合适的生成方案，那暂时先不加了。如果读者有好的方案，欢迎与笔者交流。关于作者：常以轩辕Rowboat为名混迹于江湖。前端路上 | PPT爱好者 | 所知甚少，唯善学。个人博客segmentfault个人主页掘金个人主页知乎github小结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大前端神器安利之 Puppeteerpuppeteer API中文文档