前端使用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中文文檔

關於

做者：常以若川爲名混跡於江湖。前端路上 | PPT愛好者 | 所知甚少，惟善學。
我的博客
segmentfault前端視野專欄，開通了前端視野專欄，歡迎關注~
掘金專欄，歡迎關注~
知乎前端視野專欄，開通了前端視野專欄，歡迎關注~
github blog，求個star^_^~

微信公衆號 若川視野

可能比較有趣的微信公衆號，長按掃碼關注。也能夠加微信 lxchuan12，註明來源，拉您進【前端視野交流羣】。