HTML5技术

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

字号+ 作者:H5之家 来源:H5之家 2017-07-28 17:09 我要评论( )

由于工作所需,最近花时间研究了html转换为pdf的功能。html转换为pdf的关键技术是如何处理网页中复杂的css样式,通过在网上收集资料,发现目前html 转换为pdf的解决方案主要分为三类: 本次针对网上介绍的方案,结合实际项目的需求,做一一测试,在性能和功

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

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

1.测试页面介绍

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

 

2.wkhtmltopdf测试

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

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

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

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

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

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

 页面导出效果如下:

测试说明:

通过测试发现,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的安装使用包,也就是说可以在不同平台上二次开发采集项目或是自动项目测试等工作。官网地址

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

 测试页面导出效果如下:

测试说明:

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

3.IText和Flying Sauser

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

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

测试结果:本实验的测试页面无法出来,普通的测试页面效果如下:

测试说明:

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

4.PD4ML测试

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

该软件的优点是:

该软件的缺点是:

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

    测试说明:

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

    5.html2canvas测试

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

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 关于面试!(投递篇) - 碎冰

      关于面试!(投递篇) - 碎冰

      2017-07-28 18:00

    • html5动画之等待加载动画 - 猫-前端之路

      html5动画之等待加载动画 - 猫-前端之路

      2017-07-28 10:02

    • 解决HTML5的Video标签,有部分MP4无法播放的问题 - 我们都是程序猿

      解决HTML5的Video标签,有部分MP4无法播放的问题 - 我们都是程序猿

      2017-07-26 14:00

    • 我的初学html5 canvas - 言语无声

      我的初学html5 canvas - 言语无声

      2017-07-25 11:01

    网友点评
    p