html变换为pdf实例的1些总结(多图强烈推荐)

因为工作中所需,近期花時间科学研究了html变换为pdf的作用。html变换为pdf的重要技术性是怎样解决网页页面中繁杂的css款式,根据在网络上搜集材料,发现现阶段html 变换为pdf的处理计划方案关键分成3类:

顾客端方式:前后左右台启用顾客端程序流程,运用顾客端程序流程的作用进行pdf文档变换。本次检测专用工具有:wkhtmltopdf和PhantomJS。java jar包分析类方式:java编码分析css款式,汉语翻译html文档为pdf文档。本次检测类有:IText,Flying Sauser,PD4ML。js 前端开发分析方式:js前端开发分析html文档为pdf文档,本次检测实例有:html2canvas。

本次对于在网上详细介绍的计划方案,融合具体新项目的要求,做11检测,在特性和作用层面做以下剖析。

1.检测网页页面详细介绍

根据查询各个变换实例在网络上的详细介绍,简易的html款式,1般的报表款式在做pdf文档变换时,以上的计划方案均适用。但考虑到到具体业务流程的必须,本次检测特地用到了bootstrap (v 3.3.6)的css款式,另外网页页面也运用了css3的新特点。根据这样的新特点撰写1个静态数据的html网页页面,html网页页面在访问器中的展现实际效果以下:

2.wkhtmltopdf检测

wkhtmltopdf是1个应用webkit网页页面3D渲染模块开发设计的用来将html转成 pdf的专用工具,能够跟多种多样脚本制作語言开展集成化来变换文本文档。官方网站详细地址http://wkhtmltopdf.org/

技术性特性:Wkhtmltopdf能够立即把访问器中访问的网页页面变换成1个pdf,他是1个把html网页页面变换成pdf的手机软件(必须安裝在服务器上)。应用时可根据java编码启用cmd命令进行网页页面变换为pdf的作用。

作用检测:立即在cmd里键入检测命令,可查询解决进度。

第1个主要参数:wkhtmltopdf.exe所属的相对路径

第2个主要参数:必须变换为pdf的html网页页面

第3个主要参数:pdf文档相对路径及文档名

网页页面导出来实际效果以下:

检测表明:

根据检测发现,wkhtmltopdf对bootstap的CSS款式总体适用较好。对css3的新特点如圆形照片款式适用行不太好。一部分网页页面款式会无效。针对图表展现,eachart图表导出来程序流程会出错,不适用。但是echart有图表变换为照片的插口,可根据获得照片详细地址的方法导出来到pdf中。

3.PhantomJS检测

PhantomJS是1个根据webkit核心的无头访问器,即沒有UI页面,即它是1个访问器,只是其内的点一下、换页等人为因素有关实际操作必须程序流程设计方案完成。它出示javaScript API插口,即根据撰写JS程序流程能够立即与webkit核心互动,在此之上能够融合java語言等,根据java启用js等有关实际操作,从而处理了之前c/c++才可以较为好的根据webkit开发设计优良收集器的限定。它另外出示windows、linux、mac等不一样os的安裝应用包,也便是说能够在不一样服务平台上2次开发设计收集新项目或是全自动新项目检测等工作中。官方网站详细地址http://phantomjs.org/

PhantomJS可做网页页面剖析,作用许多,本次仅启用网页页面的截图作用。在cmd中的检测以下:

检测网页页面导出来实际效果以下:

检测表明:

根据检测发现,PhantomJS对bootstap的款式适用较好。对css3的新特点如圆形照片款式适用行不太好。一部分网页页面款式会无效。针对echart图表展现,也可立即导出来。实际效果以下:

3.IText和Flying Sauser

IText完成html2pdf,速率快,纠错工作能力差,适用汉语(规定HTML应用unicode编号),但中适用1种汉语字体样式,开源系统。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的工作中。参照网站:http://www.pd4ml.com

该手机软件的优势是:

适用的HTML标识、CSS特性较全,变换失真较为小,可使用HTML+CSS完成精准的合理布局操纵。对网页页面文档标识、CSS英语的语法不正确的容错机制性较为好。对无需附加的操纵,就适用照片的转换輸出。

该手机软件的缺陷是:

不开源系统,全新的demo版本号,免费下载检测之后,发现不适用汉语变换。务必选购商业服务版本号才能够。(这里很坑,检测错码难题通但是,后边发现是原本就不适用)。破译后的1些旧版本号能够处理错码难题,可是适用的css款式沒有新版本号的全。

检测結果:

检测表明:

新版本号的汉语错码,可是适用一部分css款式。老版本号的破解后,页面的款式适配性差,对bootsrtap的适用性低,就基础的能够出1个数据信息,展现照片沒有难题。考虑到到是收费手机软件,而且特性也不足健全,针对一般网页页面可选用模版导出来或别的的专用工具导出来,不提议应用。

5.html2canvas检测

html2canvas是1个非常非常好的JavaScript类库,它应用了html5和css3的1些新作用特点,完成了在顾客端对网页页面开展截图的功 能。html2canvas根据获得网页页面的DOM和元素的款式信息内容,并将其3D渲染成canvas照片,从而完成给网页页面截图的作用。它不必须来自服务器任何3D渲染,整张照片全是在顾客端访问器建立。当访问器不适用Canvas时,将选用Flashcanvas或 ExplorerCanvas技术性替代完成。下列访问器可以很好的适用该脚本制作:Firefox 3.5+, Google Chrome, Opera新的版本号, IE9以上的访问器。由于每一个访问器3D渲染网页页面的方法都不尽同样,因此转化成的照片也不太1样。尽管它现阶段還是解决开发设计环节,但還是很值得希望的。这个软件依靠于jQuery软件,提议应用全新版的。

不适用跨域照片不可以在访问器软件中应用一部分访问器上不适用SVG照片不适用Flash不适用ifream(可改动js初始编码,适用ifream)

本次应用html2canvas做检测时,发现许多新项目网页页面可一切正常截图,包含echart图表。仅对小量css3的新特点不适用。在截图实际效果上面较好。可是在检测运用时,发现了1个致命的难题,当网页页面控制模块启用html2canvas截图后,发现原先网页页面的一部分css忽然无效。追踪剖析后,发现是html2canvas的js涵数解决它不可以鉴别的css款式。非常是对掩藏和显示信息的控制模块,适用不友善。

网页页面截图实际效果以下:

可是原来网页页面的css无效,网页页面出現出现异常,掩藏的一部分款式,显示信息的款式展现错乱。

检测表明:

根据检测发现,html2canvas对bootstap的款式适用较好。对css3的新特点如圆形照片款式适用行不太好。它的关键优势是轻前端开发,针对更改原来网页页面的款式难题,可先导出来照片后,再次更新1次网页页面。

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更强劲,截图仅仅只是在其中的1个小作用,根据它还能够做网页页面剖析,提议应用PhantomJS。html2canvas的截图方式灵便,是轻量级的前端开发截图专用工具。现阶段来讲,一部分作用不全,但总体实际效果还非常好,对于一部分截图危害原网页页面的难题,可先截图储存取得成功后,在更新1次网页页面,做到截图导出来到pdf的实际效果。

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助~假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用!