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

　　asp代码加密工具在哪下载安装到手机asp代码加密工具在哪找到密码由于工作所需，最近花时间研究了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。

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

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

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

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

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

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

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

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

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

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

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

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

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

　　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样式。特别是对隐藏和显示的模块，支持不友好。

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

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

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

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

　　HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据，本文主要讨论 POST 提交数据的几种方式。我们知道，HTTP 协议是以 ASCII...查看详情

　　HTML的发展历史:HTML英语意思是Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。HTML是由WEB的发明者Tim Berners-Lee和同事nolly于1990年...查看详情

　　一、<div></div>和<span></span>1.<div></div>标签<div></div>标签可定义文档中的分区或节（division/section），从而把文档分割...查看详情

　　简介最近在做大作业的时候需要做一个弹幕播放器。借鉴了一下别人的源码自己重新实现了一个，演示如下主要的功能有发送弹幕设置弹幕的颜色，速度和类型显示弹幕已知缺陷：不能全屏canvas没有做自适应没有自定义播放器控件没有根据播放时间显示相应的弹幕弹幕不能实现悬停...查看详情

　　name指定标签的名称。格式<input type="text" name="username" />应用场景①form表单：name可作为转递给服务器表单列表的变量名；如上面的传到服务器的名称为：username=text的...查看详情

　　<input>标签<input> 标签用于搜集用户信息。type属性根据不同的 type 属性值，输入字段拥有很多种形式。可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。text：文本区域readonly属性：是否只读。passwor...查看详情

　　简介meta标签是HTML语言HEAD区的一个辅助性标签。meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。mata 标签包含全局属性（查看详情

　　前言meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价...查看详情

　　XML/HTML Code复制内容到剪贴板 <inputid="username"name="username"type="text"placeholder=&...查看详情