分享一个我最近制作的小工具，可以把网页文档制作成PDF文档

写这个工具的原因

有一些好的教程只有在线文档，没有离线文档，即使有离线文档也不一定是pdf文档。pdf 文档是一种非常不错的格式,无论在手机、电脑还是平板上看，文档的排版都是一致的。而且我有个ipad，如果拿来看文档肯定是非常舒服了，所以我就写了这个工具。

最早写这个工具的时候还是几年前，当时为了制作一份 laravel 的pdf文档，就写了一个 laravel 专用的，只能制作 laravel 的文档。后来我就想能不能搞一个通用的，于是就有了这个工具的初代。虽然能用，不过扩展性一般，如果你想弄一个别的文档，略微有些复杂。

最近我终于有点时间了，于是重写了这个项目，使扩展这个项目更加简单。

工具的基本原理

工具基本原理其实很简单，写一份抓取网页文档的程序，然后把网页存到本地，最后调用转换程序把html 文档转换为 pdf 文档。

处理网页最方便的语言就是 javascript了，这个工具抓取网页使用的就是javascript，使用时先打开要抓取的网站，然后打开浏览器控制台，把脚本复制进去，利用js强大的功能，提取网页内容轻轻松松。

当然，一个web文档一般都是很多网页的，所以需要用js分析结构，然后用ajax 或者 fetch 全部抓取下来。由于在控制台执行，所以同源不会出现跨越问题。

如何保存

抓取的网页这么保存的呢？答案是通过http post到我本地的web api ，这个程序是使用 vue3 + vite 编写的，而 vite实际上就是一个静态web文件服务器，不过他还能处理一些js模块的工作。这个程序的一部分以插件的形式嵌入vite，所以可以通过http服务来保存post过来的文档数据，至于跨越问题，vite是支持html5的跨域功能的，所以抓取脚本可以顺利的把数据post过来。

怎么使用这个工具

因为这是一个 node.js 项目，所以需要先安装 node.js 环境，推荐版本为 v16.16.0 或者更高版本。

此外还需要安装calibre，用于转换 pdf 文件，安装成功之后，需要把 ebook-convert 程序所在的目录加入系统PATH环境变量。

# clone项目到本地
git clone https://github.com/liuguangw/pdf-builder.git
cd pdf-builder
# 以pnpm工具运行命令example
# 安装项目依赖(只需要在安装时执行)
pnpm install
# 启动server
pnpm run dev
# 然后用浏览器打开 http://127.0.0.1:5173
# 根据提示进行即可

展示图

最后

项目地址：https://github.com/liuguangw/pdf-builder

详细使用说明请参考我写的wiki: 使用说明

你如果也想加一个自定义文档，可以看的扩展说明，理论上只要稍微懂一点点js的都会扩展

最后附上我这两天制作的两份pdf文档，当然你们也可以尝试用我的这个工具自己做一个pdf

Vue 3 中文文档

Vue 3 API文档