jsPDF介绍与兼容IE的补丁
KimmKing
2009年4月29日
前几天的JavaEye新闻频道介绍了jsPDF开源项目(《使用JavaScript,动态生成PDF》)。
jsPDF是James Hall创建的一个在客户端使用纯JavaScript生成pdf文件的开源项目,项目在: http://code.google.com/p/jspdf/。目前只支持Safari,opera或Firefox浏览器(奇怪,不支持占据绝对统治地位的IE~~~~)。
js生成pdf?等等,pdf文件不是二进制的吗?JavaScript的一大遗憾就是不能直接操作二进制。呵呵,还真的勾起了本人对这个项目的兴趣。
svn下了源码,呵呵,三个js文件:base64.js、sprintf.js、jspdf.js。前两个都是开源的js类库。第一个看名字就知道是base64编码解码的函数库。打开文件看看,前两行就说明了出处:http://www.webtoolkit.info/。第二个还真不知道是做什么用的,c里的哪个输出函数?原来webtoolkit上也有,还真是源于c里的,格式化输出字符串的js函数。jspdf.js这个文件里的是生成pdf文件格式的函数。代码页不多,不到300行,短小精悍,使用简单,功能吗,自然也少,就两个功能addPage和text。addPage添加一个新的pdf页面。text则是在当前页面的指定位置写入文本。其实jspdf中实现了字体、长度单位、纸型等常见的参数设置,可惜的是作者没有把这些参数的设置暴露给外部调用的jsPDF对象(源代码分析以后再写吧,如果有机会的话)。可见目前的jsPDF不是一个稳定版本,还在完善中。另外作者写了一个添加图片的空方法未实现,添加图片实在是有一定的难度。
一个典型的jsPDF应用如下:
jsPDF.init();
jsPDF.addPage();
jsPDF.text(20, 20, 'Hello world!');
jsPDF.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
jsPDF.addPage();
jsPDF.text(20, 20, 'Do you like that?');
var out = jsPDF.output();
var url = 'data:application/pdf;base64,' + Base64.encode(out);
document.location.href = url;
在chrome浏览器中效果如下,呵呵,pdf出来了:
嚯嚯,看到了啥,没错,“data:application/pdf;base64,”,这个东西,传说中的data url scheme,或者简称data协议。就是把数据放在后面,整个作为一个url使用,浏览器根据前缀的文件类型和编码(一般是base64),还原数据并展示,常用的例子比如小图片直接用这种方式编码到css代码中。(The "data" URL scheme: http://www.ietf.org/rfc/rfc2397.txt?number=2397)。可惜的是,IE作为一个特立独行的浏览器,一直没有实现这个标准。data协议在IE下无效。
IE下这么办呢?怎么能让jsPDF在IE这破玩意儿下跑起来?想想,发挥下聪明才智,继承和发扬下中华民族的传统美德。
JavaScript生成pdf文件,就是说要先生成文件的文本内容,然后在新的页面打开,并让浏览器认为这个文件是pdf类型的。生成新的页面,无外乎:document.write、location.href和window.open。
document.write 写出来的是HTML。JavaScript里还真是没有直接的办法让IE认为一个打开的窗口中的文档是其他的格式的。document.docType标识文档类型,只读。document.write不行,window.open一个空页面,写内容的方式也不可行。
IE不支持Data协议,那么,有没有类似的默认协议或处理方式呢?baidu、google、msdn,xx、xxxx,没找到。真的没有。IE可以自己定义url协议的,比如qq、迅雷、bt等等,在注册表里注册下自己写的处理程序就成。算了,这个自己写个data协议的处理程序,让用户装程序,意义不大(而且IE下url的长度限制是2083字节,随便什么base64下,都很容易超出来)。url带数据的方式也不太可行。
Data协议一般是把文件base64编码,嵌入到url里。IE下,常用的将文件嵌入到html里的技术,mht!呵呵。IE打开百度,另存为mht文件,再用记事本打开,果然base64的。不过,可惜的是,将pdf的base64写到mht文件,然后用IE打开,IE是不认的。就算IE能够识别mht中的pdf,引发的另一个问题是JavaScript生成mht需要的所有文字后,如何让IE认为这段文本是mht格式的?如果是一个文件或是url,以.mht结尾,IE认为是mht格式的。mht是个鸡肋。
最后一招,只能是写临时文件了,然后跳转到或是打开这个临时文件。base64都免了,直接存pdf文件就成了。JavaScript不支持io的,还好的是万恶又彪悍的ActiveX同学提供了需要的一切,一个系统内置的FileObjectSystem就足够用了。
修改jsPDF的思路如下:
1. 生成pdf文本
2. 判断浏览器类型
3. 非IE浏览器还用原来的处理方式
4. IE浏览器用fso取系统临时文件夹
5. 保存pdf文本为pdf文件
6. 跳转或是打开此pdf文件
需要注意的是,使用ActiveX组件需要降低IE的安全级别。如果是本地测试,需要在“工具”-“Internet选项”-“安全”中降低“本地intranet”的安全性。如果是远程的web站点,则可以将站点的url添加到“可信站点”并降低次区域的安全性。运行时,按IE提示允许ActiveX运行即可。
补丁文件:jspdf.fix.js,提供了一个统一的调用方法openPdf( pdfText, bBlank, pdfName)。pdfText为生成的pdf文本,bBlank为是href还是open,pdfName表示IE下生成临时文件的文件名。
修改后的调用方式,(--就一句~~:
jsPDF.init();
jsPDF.addPage();
jsPDF.text(20, 20, 'Hello world!');
jsPDF.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
jsPDF.addPage();
jsPDF.text(20, 20, 'Do you like that?');
var out = jsPDF.output();
qsoft.openPdf(out,false,'test');
IE下的效果:
分享到:
相关推荐
jspdf ie 兼容 内容丰富。
pdf.js pdf在线预览组件,支持IE,chrome多个浏览器,支持下载、打印功能。
1.页面底层实现——Vue:最低兼容ie10 2.实现思路: 1> 使用html2canvas.js将网页转换为图片 2> 使用jsPdf.debug.js将canvas生成的图片转换为pdf文件 具体实现: 要这样实现首先要引入两个插件: ...
html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案,设置背景色为白色,然后转成图片后,获取截断处图片像素点,从截断处往上一行行扫描像素点颜色,碰到这一行颜色都是全白的,代表是从这里开始截断,...
jsPDF1.3.2
jspdf源代码jspdf源代码jspdf源代码jspdf源代码jspdf源代码jspdf源代码
jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档,该文件包含jspdf.debug.js和jspdf.min.js,版本为1.5.3,需要的朋友可以下载使用。
jspdf支持分页和清晰度处理DEMO
jsPDF支持中文导入
jspdf html页面生成pdf j jspdf html页面生成pdfspdf html页面生成pdf
jspdf.js和demo,jspdf.js,jspdf.min.js,pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件。 pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,一个负责API解析,一个负责核心解析...
修改了html2canvas的bug,使其支持打印超长内容,进而可以使用jspdf打印为pdf文档
jspdf
jspdf中文乱码字体包。也可以自己下载jspdf源文件,然后上传字体包,然后生成字体文件,引用
jsPDF HTML5是一个客户端解决方案生成pdf文件。适合活动门票、报告、证书,等等。 它将在IE6+,Firefox 3 +,Chrome,Safari 3 +,Opera。IE9下工作。
解决jspdf导出pdf中文乱码,详细说明地址:https://blog.csdn.net/jinggaoniao/article/details/108751020
通过javascript将html转为pdf进行导出下载,并且兼容各种浏览器,包括ie、谷歌、火狐等
利用jspdf技术,可以完美支持HTML转pdf,支持下载,支持自定义分类
jspdf_plugins的部分组件的js文档
JSPDF(解决了全页面截图文图),亲测可用。大家可以放心下载