0
点赞
收藏
分享

微信扫一扫

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

蓝莲听雨 2022-07-27 阅读 67


你好,我是若川,微信搜索「若川视野」关注我,专注前端技术分享。欢迎加我交流学习。

​写于2018年08月29日​​​,之前排版比较乱,影响阅读。所以重新打算重新排版发布下。虽然​​puppetter​​已经更新很多版本了,但这篇文章不算过时。文章比较短,很快能看完。

本文仓库地址:​​https://github.com/lxchuan12/learn-nodejs/tree/master/src/puppeteer​

1、puppeteer 是什么?

​puppeteer​​​: ​​Google​​​ 官方出品的 ​​headless​​​ ​​Chrome​​​ ​​node​​​ 库
`puppeteer` `github`仓库[1]
`puppeteer` `API`[2]

官方介绍:

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

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

2、爬取网站生成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小书》[3]简介
关于作者@胡子大哈[4]
这是⼀本关于 React.js 的⼩书。因为⼯作中⼀直在使⽤ ​​​React.js​​​,也⼀直以来想总结⼀下⾃⼰关于 ​​React.js​​ 的⼀些 知识、经验。于是把⼀些想法慢慢整理书写下来,做成⼀本开源、免费、专业、简单的⼊⻔级别的⼩书,提供给社区。希望能够帮助到更多 ​​React.js​​​ 刚⼊⻔朋友。
下图是《​​​React.js​​ 小书》部分截图:

前端使用puppeteer 爬虫生成《React.js 小书》PDF并合并_chrome《​​​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小书​​​截图来看。
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`每一小节的代码[5]

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

即可生成如下图:每一小节(0-46小节)的​​pdf​

前端使用puppeteer 爬虫生成《React.js 小书》PDF并合并_react.js_02每一小节(0-46小节)的​​​pdf​

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

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

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

这个​​pdf-merge​​依赖 pdftk[8]

安装 PDFtk
Windows
下载并安装[9]
笔者安装后,重启电脑才能使用。

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) => {...});

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

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

最终合并的​​pdf​​文件在这里React小书(完整版)-作者:胡子大哈[11],可供下载。也可以在公众号内回复 pdf 获取。

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

小结

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

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

参考资料

[1]

​puppeteer​​​ ​​github​​仓库: https://github.com/GoogleChrome/puppeteer

[2]

​puppeteer​​​ ​​API​​: https://pptr.dev/

[3]

《​​React.js​​小书》: http://huziketang.mangojuice.top/books/react/

[4]

关于作者@胡子大哈: http://huziketang.mangojuice.top/books/react/me/

[5]


今日话题

略。欢分享、收藏、点赞、我的公众号文章~

一个愿景是帮助5年内前端人成长的公众号


················· 若川简介 ·················


你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《​​学习源码整体架构系列​​》多篇,在知乎、掘金收获超百万阅读。

从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看​​年度总结​​

同时,活跃在知乎@若川,@若川。致力于分享前端开发经验,愿景:帮助5年内前端人走向前列。

举报

相关推荐

0 条评论