多年以前给自己的博客增加了“文章生成PDF”这个功能，那时考虑比较多。随着时间的推移，CSS的越来越复杂，生成的PDF文件布局往往与源文件有很大的差异，甚至偶尔还出现乱码。
是时候升级一下“生成PDF”功能了。
搜寻Wordpress的PDF插件
不想重复造轮子，如果Wordpress的插件已经支持得很好，那就直接拿来用吧。
在wordpress的插件中心找到了一些生成pdf的插件，逐个尝试。
尝试 WP Advanced PDF，安装完之后发现与我的wordpress版本不兼容，于是升级wordpress，经过测试发现中文又会出现乱码；尝试 PDF24，也是对中文支持不好，经常出现乱码；尝试其他的插件，发现大多存在中文乱码或文档格式改变的情况。
看来，只能放弃现有的wordpress插件了。
基于现成工具改造
既然现有的wordpress插件不理想，下一步看看是否能基于其他的工具来实现。
优先考虑哪种方案呢？基于服务端API的转换工具比较重载，为了自己的博客文章另存为PDF这个小功能去搭建一台服务器，成本太高，暂且把它当做最后的选择。如果有JavaScript生成PDF的库，那就再好不过了。
很庆幸，找到了 html2pdf.js，这个JavaScript库使用很方便，可以通过几行代码就能把它集成到wordpress中。
引入JavaScript文件
在使用 html2pdf 时，需要现在html文件中引入JavaScript文件html2pdf.bundle.min.js，步骤如下：
-
在Github上Fork项目
eKoopmans/html2pdf.js； -
在Github上创建一个项目，命名为
zijinshi.github.io； -
在第2步创建的项目中，导入第1步创建的项目。
此时，我们就在github上创建了一个可以引入的JavaScript，URL为：https://zijinshi.github.io/dist/html2pdf.bundle.min.js。
为什么不直接引入 eKoopmans/html2pdf.js 项目中的文件 https://raw.githubusercontent.com/eKoopmans/html2pdf.js/master/dist/html2pdf.bundle.min.js呢？
起初我也是这么做的，发现这个文件无法下载，在Google帮助下，找到了原因，可参见这篇文章： 把 css文件和 js文件放在 Github 里，可以在写网页的时候直接调用吗？ 我就不赘述了。
当然，我们可以直接把这个JavaScript文件上传到wordpress的服务器上。
代码实现
接下来就是代码实现了。
1. 在wordpress的文章页面中引用JavaScript库。
| 1 |
|
2. 在以上代码的下方，创建生成PDF的函数。
| 1 2 3 4 5 6 7 8 9 10 11 12 |
|
这段代码是先获取文章内容的element，然后把element元素渲染在Canvas上，最后把它生成为PDF。在把element渲染到Canvas上时，可以通过参数scale设置缩放比例，scale值越大，PDF越清晰，与之对应的，PDF文档越大。在权衡清晰度与文档大小之后，我把scale设置为4。
3. 最后，在需要生成PDF的地方，加入以下代码：
| 1 2 3 4 5 |
|
其中，img元素是下载PDF的图标，它嵌套到一个超级链接中，当用户点击超级链接时，就会调用createPDF函数。生成的PDF文件名，就是原文章的标题名称。
这样，点击PDF的小图标，就可以生成PDF文档了，如下图中红色圈出来的部分：
总结
这种方法优缺点都很明显。
优点是：
-
实现方便，只需引用一个JavaScript文件，写几行代码就能实现；
-
生成PDF的工作都在浏览器端完成，服务器没有任何并发压力。
缺点是：
- PDF文件是通过图片生成的，文件比较大；
- 清晰度不如文本；
- 换页时可能存在文字被割裂的情况。
如果以后有空，写个wordpress插件，使用 html2pdf.it 实现完美转换吧。
相关文章
1446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
