关于html转换为pdf案例的一些测试与思考

快来打我* 2022-01-07 09:19 412阅读 0赞

由于工作所需，最近花时间研究了html转换为pdf的功能。html转换为pdf的关键技术是如何处理网页中复杂的css样式，通过在网上收集资料，发现目前html 转换为pdf的解决方案主要分为三类：

*  客户端模式：前后台调用客户端程序，利用客户端程序的功能完成pdf文件转换。本次测试工具有：wkhtmltopdf和PhantomJS。
 *  java jar包解析类模式：java代码解析css样式，翻译html文件为pdf文件。本次测试类有：IText，Flying Sauser，PD4ML。
 *  js 前端解析模式：js前端解析html文件为pdf文件，本次测试案例有：html2canvas。

本次针对网上介绍的方案，结合实际项目的需求，做一一测试，在性能和功能方面做如下分析。

### **1.测试页面介绍** ###

通过查看各个转换案例在网上的介绍，简单的html样式，一般的表格样式在做pdf文件转换时，以上的方案均支持。但考虑到实际业务的需要，本次测试特意用到了bootstrap (v 3.3.6)的css样式，同时页面也应用了css3的新特性。基于这样的新特性编写一个静态的html页面，html页面在浏览器中的展示效果如下：

![626790-20170728152818258-712330787.png][]

### **2.wkhtmltopdf测试** ###

wkhtmltopdf是一个使用webkit网页渲染引擎开发的用来将html转成 pdf的工具，可以跟多种脚本语言进行集成来转换文档。官网地址 [http://wkhtmltopdf.org/][http_wkhtmltopdf.org]

**技术特点**：Wkhtmltopdf可以直接把浏览器中浏览的网页转换成一个pdf，他是一个把html页面转换成pdf的软件（需要安装在服务器上）。使用时可通过java代码调用cmd指令完成网页转换为pdf的功能。

**功能测试：**直接在cmd里输入测试指令，可查看处理进度。

![626790-20170728145110133-2123660962.png][]

第一个参数：wkhtmltopdf.exe所在的路径

第二个参数：需要转换为pdf的html页面

第三个参数：pdf文件路径及文件名

页面导出效果如下：

![626790-20170728150744852-148119917.png][]

**测试说明：**

通过测试发现，wkhtmltopdf对bootstap的CSS样式整体支持较好。对css3的新特性如圆形图片样式支持行不好。部分页面样式会失效。对于图表展示，eachart图表导出程序会报错，不支持。不过echart有图表转换为图片的接口，可通过获取图片地址的方式导出到pdf中。

### **3.PhantomJS测试** ###

PhantomJS是一个基于webkit内核的无头浏览器，即没有UI界面，即它是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。它提供javaScript API接口，即通过编写JS程序可以直接与webkit内核交互，在此之上可以结合java语言等，通过java调用js等相关操作，从而解决了以前c/c++才能比较好的基于webkit开发优质采集器的限制。它同时提供windows、linux、mac等不同os的安装使用包，也就是说可以在不同平台上二次开发采集项目或是自动项目测试等工作。官网地址[http://phantomjs.org/][http_wkhtmltopdf.org]

PhantomJS可做网页分析，功能很多，本次仅调用网页的截图功能。在cmd中的测试如下：

![626790-20170728151542321-313520.png][]

测试页面导出效果如下：

![626790-20170728151914805-2051799763.png][]

**测试说明：**

通过测试发现，PhantomJS对bootstap的样式支持较好。对css3的新特性如圆形图片样式支持行不好。部分页面样式会失效。对于echart图表展示,也可直接导出。效果如下：

![626790-20170728152249211-1777108577.png][]

### 3.IText和Flying Sauser ###

IText实现html2pdf，速度快，纠错能力差，支持中文（要求HTML使用unicode编码），但中支持一种中文字体，开源。Flying Sauser实现html2pdf，纠错能力差，支持多种中文字体（部分样式不能识别），开源。

**技术特点：**基于java编程将html的css样式做解析处理，目前仅对较简单的页面和样式支持。对于css3的样式和关联复杂的css样式兼容性极差。当页面内容较长时，处理时间慢。参考地址：https://code.google.com/archive/p/flying-saucer/

**测试结果：**本实验的测试页面无法出来，普通的测试页面效果如下：

![626790-20170728153345321-174076877.png][]

**测试说明：**

通过测试发现，IText和Flying Sauser这两个开源项目对css3的兼容性基本不行，通过查阅资料，发现这种技术比较陈旧，这个开源项目现在也没有更新和维护了。对于简单表格，统计数据的导出，更新的技术有bootstrap table,easyui datagrid表格导出。网上介绍的这种方案不建议使用。

### 4.PD4ML测试 ###

PD4ML是纯Java的类库，使用HTML、CSS作为页面布局和内容定义格式来生成PDF文档的强大工具，可以简化最终用户生成PDF的工作。参考网站：[http://www.pd4ml.com][http_www.pd4ml.com]

该软件的优点是：

*  支持的HTML标签、CSS属性较全，转换失真比较小，可以使用HTML+CSS实现精确的布局控制。
 *  对网页文件标签、CSS语法错误的容错性比较好。
 *  对不用额外的控制，就支持图片的转化输出。

该软件的缺点是：

*  不开源，最新的demo版本，下载测试以后，发现不支持中文转换。必须购买商业版本才可以。（这里很坑，测试乱码问题通不过，后面发现是本来就不支持）。
 *  破解后的一些旧版本可以解决乱码问题，但是支持的css样式没有新版本的全。

**测试结果：**

**![626790-20170728154607040-1900876130.png][]**

**测试说明：**

新版本的中文乱码，但是支持部分css样式。老版本的破译后，界面的样式兼容性差，对bootsrtap的支持性低，就基本的可以出一个数据，展示图片没有问题。考虑到是收费软件，并且性能也不够完善，对于普通页面可采用模板导出或其他的工具导出，不建议使用。

### 5.html2canvas测试 ###

html2canvas是一个相当不错的JavaScript类库，它使用了html5和css3的一些新功能特性，实现了在客户端对网页进行截图的功 能。html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或 ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本：Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。因为每个浏览器渲染页面的方式都不尽相同，所以生成的图片也不太一样。虽然它目前还是处理开发阶段，但还是很值得期待的。这个插件依赖于jQuery插件，建议使用最新版的。

*  不支持跨域图片
 *  不能在浏览器插件中使用
 *  部分浏览器上不支持SVG图片
 *  不支持Flash
 *  不支持ifream(可修改js原始代码，支持ifream)

本次使用html2canvas做测试时，发现很多项目页面可正常截图，包括echart图表。仅对少量css3的新特性不支持。在截图效果上面较好。但是在测试应用时，发现了一个致命的问题，当页面模块调用html2canvas截图后，发现原来页面的部分css突然失效。跟踪分析后，发现是html2canvas的js函数处理它不能识别的css样式。特别是对隐藏和显示的模块，支持不友好。

![626790-20170728160218758-10579738.png][]

页面截图效果如下：

![626790-20170728160304243-1220608547.png][]

但是原有页面的css失效，页面出现异常，隐藏的部分样式，显示的样式展示混乱。

![626790-20170728160458383-8216947.png][]

**测试说明：**

通过测试发现，html2canvas对bootstap的样式支持较好。对css3的新特性如圆形图片样式支持行不好。它的主要优点是轻前端，对于改变原有页面的样式问题，可先导出图片后，重新刷新一次页面。

### 6.总结 ###

通过对以上案例的测试，网上介绍的常用html转换为pdf的方法，大多数就是简单的html转换可用，但是在实际应用中，还是存在诸多问题，难以应用。通过对这些方法的实现原理分析，可得出以下结论：

*  html网页完整转换为pdf，所有的方案均有不足。若只是部分表单页面，html样式尽量不采用css3的属性，可用客户端模式和html2canvas处理。
 *  html前端样式发展快，css3新特性效果好，css定义了新的规则，语法。IText和Flying Sauser这样的java转换类根本兼容不了这些变化，因为无法及时写出转换的函数，并且这些开源项目是较老的技术，后期的开源团队已经停止维护和更新了。
 *  PD4ML本质也是java处理css的样式转换，他是商业软件，在兼容css3方面有团队支持，相对IText和Flying Sauser在性能和功能方面都更强大。但对少部分css样式也支持不好。并且中文乱码问题解决也不便。
 *  针对客户端浏览器内核模式，PhantomJS和wkhtmltopdf比较而言，PhantomJS更强大，截图仅仅只是其中的一个小功能，通过它还可以做网页分析，建议使用PhantomJS。
 *  html2canvas的截图模式灵活，是轻量级的前端截图工具。目前来说，部分功能不全，但整体效果还不错，针对部分截图影响原页面的问题，可先截图保存成功后，在刷新一次页面，达到截图导出到pdf的效果。

### 7.参考链接 ###

[http://blog.csdn.net/ouyhong123/article/details/26401967][http_blog.csdn.net_ouyhong123_article_details_26401967]

[http://blog.csdn.net/tengdazhang770960436/article/details/41320079][http_blog.csdn.net_tengdazhang770960436_article_details_41320079]

[http://www.cnblogs.com/jasondan/p/4108263.html][http_www.cnblogs.com_jasondan_p_4108263.html]

[http://blog.csdn.net/accountwcx/article/details/46785437][http_blog.csdn.net_accountwcx_article_details_46785437]

[http://blog.csdn.net/zdtwyjp/article/details/5769353][http_blog.csdn.net_zdtwyjp_article_details_5769353]

转载于:https://www.cnblogs.com/wlandwl/p/html2pdf.html

[626790-20170728152818258-712330787.png]: /images/20211223/8a4095ac542140d3a60ccc2fdfb39cc9.png
[http_wkhtmltopdf.org]: http://wkhtmltopdf.org/
[626790-20170728145110133-2123660962.png]: /images/20211223/210e9d7e047d4441b6f4591d2c998167.png
[626790-20170728150744852-148119917.png]: /images/20211223/75d5938059cb42909a2358957273150a.png
[626790-20170728151542321-313520.png]: /images/20211223/9251aed2eeb3445695562caa10b66c87.png
[626790-20170728151914805-2051799763.png]: /images/20211223/79b3b866dbc94443b5537d6bd6e42346.png
[626790-20170728152249211-1777108577.png]: /images/20211223/e2d0ac4cab1849cf92a9a9d976360289.png
[626790-20170728153345321-174076877.png]: /images/20211223/c05f701e5b524cc49bd789fdbbbc4044.png
[http_www.pd4ml.com]: http://www.pd4ml.com/
[626790-20170728154607040-1900876130.png]: /images/20211223/46c5364f3fa0457ea36adeaefbc9cf9d.png
[626790-20170728160218758-10579738.png]: /images/20211223/032debbaba7d4a50b7ade946ac8ac8d0.png
[626790-20170728160304243-1220608547.png]: /images/20211223/7dc4de08ec574039b2fd3ea1f1e9c152.png
[626790-20170728160458383-8216947.png]: /images/20211223/b6b28708e2594942a84377083583b52f.png
[http_blog.csdn.net_ouyhong123_article_details_26401967]: http://blog.csdn.net/ouyhong123/article/details/26401967
[http_blog.csdn.net_tengdazhang770960436_article_details_41320079]: http://blog.csdn.net/tengdazhang770960436/article/details/41320079
[http_www.cnblogs.com_jasondan_p_4108263.html]: http://www.cnblogs.com/jasondan/p/4108263.html
[http_blog.csdn.net_accountwcx_article_details_46785437]: http://blog.csdn.net/accountwcx/article/details/46785437
[http_blog.csdn.net_zdtwyjp_article_details_5769353]: http://blog.csdn.net/zdtwyjp/article/details/5769353