wkhtmltopdf vs iText 实现 HTML 转 PDF 并导出

小知识，大挑战！本文正在参与“ 程序员必备小知识 ”创作活动

上一篇文章介绍了前端实现pdf导出的一些方式，例如：浏览器自带的、 vue-print-nb 、 html2canvas 和 jspdf 。这一篇讲述前后端结合实现 pdf 导出的方式，例如 wkhtmltopdf 和 iText ，前端主要负责导出模版的完成，后端进行数据填充和导出

wkhtmltopdf

wkhtmltopdf 使用 webkit 渲染引擎开发的，直接把 html 页面转成 pdf ，但是需要安装在服务器上。

官网地址： wkhtmltopdf.org/

官方 Issues： github.com/wkhtmltopdf…

配置参数： wkhtmltopdf.org/usage/wkhtm…

配置参数中文参考： segmentfault.com/a/119000001…

// 1. 安装：在官网下载安装包
// 2. 查看版本号：wkhtmltopdf 0.12.6 (with patched qt)
$ wkhtmltopdf -V
// 3. 测试：在cmd里输入测试指令，查看处理进度
$ wkhtmltopdf https://www.baidu.com/ ~/Desktop/baidu.pdf // 网络页面
$ wkhtmltopdf --javascript-delay 3000 report.html test.pdf // 本地HTML页面
百度页测试指令，可查看处理进度：
百度页导出效果展示：
前端需要写静态html模版页面，交给服务端渲染并且导出。
模版页实践踩坑：
采用 webkit 渲染引擎开发，对 CSS 样式整体支持友好，但对 CSS3 的新特性支持不太好，部分页面样式会失效。
wkhtmltopdf uses Qt to render HTML. The current version of wkhtmltopdf uses Qt 4.8.5, which uses version 2.2.4 of WebKit, As you can see I tried using the -webkit- prefixes(wkhtmltopdf 使用 Qt 来呈现 HTML。 wkhtmltopdf 的当前版本使用 Qt 4.8.5，它使用 WebKit 的 2.2.4 版，建议使用 -webkit- 前缀)
采用 flex 布局，需要使用兼容性样式，具体可查看issue
采用 flex 布局，导出的 pdf 会被截断，因此改为 table 布局
默认字体时宋体，如果机器上没有，中文无法显示；要想使用别的字体，必须安装对应的字体，具体可查看issue
vertical-align 属性不起作用
静态模板写 CSS 样式比较麻烦，可以直接写 SCSS，然后同步转化成 CSS，实现如下：
// 安装sass
npm install -g sass
// 实时编译命令
sass --watch test.scss:test.css
iText
IText：用于 Java 后台，将 HTML 文件转换成 PDF 文件。基于 java 将 html 的 css 样式做解析处理，仅对较简单的页面和样式支持。
使用流程：前端负责完成静态模版页面，后端基于模版页进行数据填充，然后导出 pdf 文件，前端进行下载。
模版页实践踩坑：
对 CSS 样式支持极差，CSS3 属性都不支持
不能用 flex 布局，基本只能用 table 实现
要换页的地方，添加page-break-after: always;，表示下一个元素将会换页，转 pdf 时 itext 会自动识别
定位中，不支持以百分比为单位的 css 属性 top（css property top in percents is not supported）
绝对定位可能报错（Occupied area has not been initialized. Absolute positioning might be applied incorrectly）