小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
上一篇文章介绍了前端实现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）
