需求分析
项目中用到了 Echarts,想要把图文混排,当然包括 echarts 生成的 Canvas 图也导出 PDF。
设计和实现时,分析了 POI、iText、freemaker、world 的 xml 模版、Jquery-printArea.js、JQuery Plugin-TableExport、flying saucer 等等技术组合,不尽人意。甚至因为 echarts 不支持后端调用导出图片(没有简单易行的办法),一度考虑要在导出时用 JfreeCharts 重新画一遍图表。一是不能完整体现原有设计样式,二是工期不支持这么庞大的工作量(硬撸代码解析 html 生成 word 或 pdf。好吧,也同时觉得挺 low 的);
最终选择了 wkhtmltopdf,实现了预期目标。整理成笔记,分享给大家。同时,发现 docker hub 有wkhtmltopdf 基于 apline 搭建的 web service 镜像,生产环境可以上 Docker 的同学有福了,这应该是个更加高效的方案。后续考虑整合到支撑平台中,一并开源出来。
笔记本实验
本地测试为 Mac Book,生产环境请自行评估调整。
下载和安装
B4下,brew 仓库里居然没有,所以 brew install wkhtmltopdf 安装报错。
直接贴官方链接了:有依赖亲自行安装依赖;
验证
ChinaDreams:workspace kangcunhua$ wkhtmltopdf --version
wkhtmltopdf 0.12.4 (with patched qt)
测试
联网抓取
ChinaDreams:~ kangcunhua$ wkhtmltopdf --header-center '报表' --outline --header-line --margin-top 2cm --header-line http://www.qq.com/ qq.pdf
本地页面测试
index.html 见静态页面
–zoom 4 是 Mac book 上实验出来的参数,这样页面是正常 A4 宽幅;在 windows10、Suse 11 下不用加这个参数。
toc 参数生成目录,包括左侧导航;—toc-header-text 自定义目录名;
ChinaDreams:~ kangcunhua$ wkhtmltopdf --zoom 4 toc --toc-header-text "第四季度季报" index.html export.pdf
模拟商业环境
我们拿到项目中实践验证下方案。商业项目,往往是残酷的要求,会遇到各种各样 demo 时碰不上的挑战。
思路还是先用 docker 神器,模拟商业环境,验证方案,然后再修订验证后的方案到正式项目环境验证。
客户方提供的环境是 SuSE。我们先来看看是哪个版本
cat /etc/SuSE-release # 可以看到补丁版本
SUSE LINUX Enterprise Server 11 (x86_64)
VERSION = 11
PATCHLEVEL = 4
请 Docker 神器
查找 SuSE 镜像,恰好有一个11版本的,下载镜像先
$ docker search SUSE # yuzhenpin/suse-11-sp3-x86_64-java
$ docker pull yuzhenpin/suse-11-sp3-x86_64-java
启动镜像
docker run --name suse-ep -it yuzhenpin/suse-11-sp3-x86_64-java /bin/bash
9e023776a1d5:/ # java -version
java version "1.7.0_51"
Java(TM) SE Runtime Environment (build 1.7.0_51-b13)
Java HotSpot(TM) 64-Bit Server VM (build 24.51-b03, mixed mode)
9e023776a1d5:/ # id
uid=0(root) gid=0(root) groups=0(root)
9e023776a1d5:/ # groupadd prms && useradd -d /prms -g prms -m prms
9e023776a1d5:/ # passwd prms
9e023776a1d5:/ # su prms
安装和配置
因为下载的二进制版本的,直接把 wkhtmltopdf 拷贝进容器即可。index.html 是写的测试页面,后文附有源码:此文件用到的 jquery 相关 js 直接引用了 CDN,故实验在联网环境下进行的。
ChinaDreams:copy2docker kangcunhua$ docker cp wkhtmltox-0.12.4_linux-generic-amd64.tar.xz su-ext:/prms/workspace
ChinaDreams:copy2docker kangcunhua$ docker cp index.html su-ext:/prms/workspace
检查运行依赖
使用 ldd 命令,not found 的就是对应的依赖包不存在:
7d183ecb0026:/prms/workspace/wkhtmltox/bin # ldd wkhtmltopdf
linux-vdso.so.1 => (0x00007ffe40bd2000)
libXrender.so.1 => not found
libfontconfig.so.1 => not found
libfreetype.so.6 => not found
libXext.so.6 => not found
libX11.so.6 => not found
libz.so.1 => /lib64/libz.so.1 (0x00007f9ca59ad000)
libdl.so.2 => /lib64/libdl.so.2 (0x00007f9ca57a9000)
librt.so.1 => /lib64/librt.so.1 (0x00007f9ca55a0000)
libpthread.so.0 => /lib64/libpthread.so.0 (0x00007f9ca5383000)
libstdc++.so.6 => /usr/lib64/libstdc++.so.6 (0x00007f9ca507b000)
libm.so.6 => /lib64/libm.so.6 (0x00007f9ca4e02000)
libgcc_s.so.1 => /lib64/libgcc_s.so.1 (0x00007f9ca4bec000)
libc.so.6 => /lib64/libc.so.6 (0x00007f9ca4870000)
/lib64/ld-linux-x86-64.so.2 (0x00007f9ca5bc5000)
安装依赖
使用 zypper se 命令查找,根据查找结果,来安装需要的版本;
7d183ecb0026:/prms/workspace/wkhtmltox/bin # zypper se libXrender
7d183ecb0026:/prms/workspace/wkhtmltox/bin # zypper install xorg-x11-libXrender
7d183ecb0026:/prms/workspace/wkhtmltox/bin # zypper se libfreetype
7d183ecb0026:/prms/workspace/wkhtmltox/bin # zypper install libfreetype6
7d183ecb0026:/prms/workspace/wkhtmltox/bin # zypper se libXext
7d183ecb0026:/prms/workspace/wkhtmltox/bin # zypper install xorg-x11-libXext
7d183ecb0026:/prms/workspace/wkhtmltox/bin # zypper se fontconfig
7d183ecb0026:/prms/workspace/wkhtmltox/bin # zypper install fontconfig
7d183ecb0026:/prms/workspace/wkhtmltox/bin # zypper se libX11
7d183ecb0026:/prms/workspace/wkhtmltox/bin # zypper install xorg-x11-libX11
需要在 html 代码中指定 font-face,所以需要一种支持中英文的字体。这里不指定的话,中英文都是黑色方框。因为不知容器使用的是何种字体,没找到 Suse 如何查看当前已有字体。从网下下载了文泉驿正黑,cp
了字体进来,发现是乱码,mv 重命名为 tt.tff;cp 到字体目录。
7d183ecb0026:/usr/share/fonts # mkdir windows
7d183ecb0026:/prms/workspace # mv tt.ttf /usr/share/fonts/windows/
7d183ecb0026:/prms/workspace # ./wkhtmltox/bin/wkhtmltopdf index.html exp.pdf
QIconvCodec::convertToUnicode: using Latin-1 for conversion, iconv_open failed
QIconvCodec::convertFromUnicode: using Latin-1 for conversion, iconv_open failed
Loading pages (1/6)
Counting pages (2/6)
Resolving links (4/6)
Loading headers and footers (5/6)
Printing pages (6/6)
Done
和容器之间复制文件
ChinaDreams:copy2docker kangcunhua$ docker cp wkhtmltox-0.12.4_linux-generic-amd64.tar.xz su-ext:/prms/workspace
ChinaDreams:copy2docker kangcunhua$ docker cp index.html su-ext:/prms/workspace
ChinaDreams:copy2docker kangcunhua$ docker cp 文泉驿等宽正黑.ttf su-ext:/prms/workspace
ChinaDreams:copy2docker kangcunhua$ docker cp su-ext:/prms/workspace/exp.pdf .
商业环境实战
待补充。
2017.11.10update: 商业环境最大的挑战是内网。还有个挑战是客户使用的是 SuSE Enterprise,这种情况下,如果缺少依赖,补丁包安装很麻烦。
通过走手续,在内网申请了 wkhtmltopdf 二进制包,工程师传到测试环境,直接运行了测试命令,居然一条就过!依赖不缺,甚至中文字体也不缺。这只能说是运气。不过,凡事预则立,多准备一些,事情周密一些总是没错的。
接下来,就是撰写个工具类调用 shell 命令了,可能还要考虑权限认证的问题。不过,从前台登录后的UI发起导出,应该不会存在需要认证的问题。
皆大欢喜!
错误、参考和源码
报错:SslHandshakeFailedError
笔记本实验时,报了个错。貌似也不影响最终需要的导出 PDF 结果。后来猜测应该是页面上有 button 或与打印无关的 js 导致的,删了就好了。国外的网友写了一个工具carleton/moodle-scraper,也碰上了这个问题:这个错误貌似不是我第一个碰上,官方也没有修复。
moodle-scraper 的 KNOWN CURRENT ISSUES
WebToPDF
KNOWN CURRENT ISSUES:
1) "Issue found on page:wkhtmltopdf reported an error:
Mon Mar 28 20:51:52 unreg-30-152.dyn.carleton.edu wkhtmltopdf[3817] : CGContextSetShouldAntialias: invalid context 0x0"
As of Spring 2016 this problem has not been solved and seems to be a problem with whtmltopdf using a deprecated library of Mac OSX. Try it with Windows and see if it breaks?
Additionally, reported issue on GitHub: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2196
报错信息:
Loading pages (1/6)
^C===========================> ] 48%
ChinaDreams:WebRoot kangcunhua$ wkhtmltopdf --disable-smart-shrinking index.html export.pdf
Loading pages (1/6)
QFont::setPixelSize: Pixel size <= 0 (0) ] 49%
Counting pages (2/6)
QFont::setPixelSize: Pixel size <= 0 (0)=====================] Object 1 of 1
Resolving links (4/6)
Loading headers and footers (5/6)
Printing pages (6/6)
Nov 7 13:53:25 wkhtmltopdf[2603] : CGContextSetShouldAntialias: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
Nov 7 13:53:25 wkhtmltopdf[2603] : CGContextSetShouldSmoothFonts: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
Nov 7 13:53:25 wkhtmltopdf[2603] : CGContextSetFillColorSpace: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
Nov 7 13:53:25 wkhtmltopdf[2603] : CGContextSetFillColor: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
Done
Exit with code 1 due to network error: SslHandshakeFailedError
报错 convertToUnicode:
在容器中,配置好之后,运行转换命令,报了一个错误,但从结果来看,不影响最终 pdf 生产。故此处没有特殊处理,不过网友给出了解决方案:强迫症或时间充分的网友可以自行验证和修复:
7d183ecb0026:/prms/workspace # ./wkhtmltox/bin/wkhtmltopdf index.html exp.pdf
QIconvCodec::convertToUnicode: using Latin-1 for conversion, iconv_open failed
QIconvCodec::convertFromUnicode: using Latin-1 for conversion, iconv_open failed
Loading pages (1/6)
Counting pages (2/6)
Resolving links (4/6)
Loading headers and footers (5/6)
Printing pages (6/6)
Done
注意上文报了一个 Qt 错误,
QIconvCodec::convertToUnicode: using Latin-1 for conversion, iconv_open failed
QIconvCodec::convertFromUnicode: using Latin-1 for conversion, iconv_open failed
这是个 Qt 移植错误:
下载 http://ftp.gnu.org/gnu/libiconv/libiconv-1.14.tar.gz
> ./configure -prefix=$PWD/_install -host=arm-linux-gnueabihf
> make
> make install
把_install/lib 下的 preloadable_libiconv.so 拷到系统的 /system/lib 下,
export LD_PRELOAD=/system/lib/preloadable_libiconv.so
参考链接1
感谢各位勇于分享的亲:
- jquery PrintArea 实现票据的套打功能(代码)
- 通過選擇 excel 文件或輸入json數據,自動生成圖表工具
- FreeMarker + xml 导出 word
- How To Convert an HTML Table into an XML File
- 这篇附有 C# 源码,直接转换 table 的 html 代码为 word 的 xml 格式,我一开始最想解决的办法,可惜没有Java版的。自己硬撸又来不及;最终放弃。
- flying saucer html 转 pdf 经验分享
- 最好用 Html 转 pdf 的工具——wkhtmltopdf
- wkhtmltopdf 参数介绍
- HTML 转 PDF 排雷 之 wkhtmltopdf 转换得到的PDF没有内容
- wkhtmltopd f解决分页问题
- wkhtmltopdf 有个很好的方法,就是在那个 div 的样式后添加一个:page-break-inside:avoid;就 ok 了。
- iText 和 flying sauce r结合生成 pdf 的技术
- web 打印一篇就够,jspdf,wkhtmltopdf
- 使用 wkhtmltopdf 将 html 转为 pdf :
- 这篇文章直接指出了 wkhtml 支持 echarts 的 canvas 标签,哇哈哈:)
- HTML 转 PDF 工具(wkhtmltopdf)介绍,支持 widows 和 linux
- html 的 table 中不能用 thead,用了后换页会出现两个表头问题如图
- 可以用 thead,不过得加样式 tr { page-break-inside: avoid !important;}
- wkhtmltoxwkhtmltopdf linux 安装
- php 扩展 php-wkhtmltox 项目主页: https://github.com/mreiferson/php-wkhtmltox
参考链接2
wkhtmltopdf 网页转 PDF 程序安装教程
linux下查看 yum/rpm/dpkg 某软件是否已安装的方法
Error while loading shared libraries: libXrender.so.1 on Linux
静态页面
My JSP 'index.jsp' starting page
First Title
测试:test
by kang.cunhua;
二级标题
正文:
轻轻的我走了,
正如我轻轻的来;
我轻轻的招手,
作别西天的云彩。
----
那河畔的金柳,
是夕阳中的新娘;
波光里的艳影,
在我的心头荡漾。
----
软泥上的青荇⑴,
油油的在水底招摇⑵;
在康河的柔波里,
我甘心做一条水草!
----
那榆荫下的一潭,
不是清泉,是天上虹;
揉碎在浮藻间,
沉淀着彩虹似的梦。
三级标题
第一行第一列 第一行第一列 第一行第一列 第一行第一列
第一行第一列 第一行第一列 第一行第一列 第一行第一列 第一行第一列
第一行第一列 第一行第一列 第一行第一列 第一行第一列 第一行第一列
四级标题
51Reboot 最新课程招生信息
docker + k8s
此课程为网络直播课程,一共 10 个课时,每周上一个全天,历时两个多月。附加:录播视频+笔记+除课堂外的答疑时间(7次+)2019-1-13 开课,原价 5800 ,现在周年活动 100 定金抵 500
课程主讲师
GY 老师:
10年一线软件开发经验,先后经历了传统安全公司,以及多家互联网公司;在安全开发方面,曾开发过 Linux 防火墙、web 应用防火墙、Linux 安全内核加固,基于大流量的 Web 安全威胁分析等项目;在互联网公司工作时,曾基于 DPDK 高性能网络开发框架开发过基于全流量的网络流量分析平台和基于 Sflow 网络流量分析平台,基于 Golang 开发 SmartDNS 等;开发语言也是从C -> python -> golang 的转变过程?现从事基于 K8S 和 Docker在私有云平台建设方面的研发工作;具备丰富的Linux系统开发经验、网络开发经验以及项目管理经验;目前开发工作90+% 都在用 Golang,Golang 是一门简洁、高效、强大且灵活的编程语言。
关于课程的具体内容想要了解的, 扫码加小助手咨询