html转换为pdf案例的一些总结（多图推荐）

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

该软件的缺点是：

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

测试结果：

测试说明：

新版本的中文乱码，但是支持部分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样式。特别是对隐藏和显示的模块，支持不友好。

页面截图效果如下：

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

测试说明：

通过测试发现，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的效果。

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对的支持!