总的来说,两种方法:服务器端生成和浏览器端生成。

服务器端生成就是:根据用户请求,获取相应的数据,使用poi/jxl, jacob/jawin+excel,或是用数据拼html的table或是cvs纯文本的数据格式等。然后按.xls或是.cvs格式的文件的形式返回给用户,指定Content-Type:application/vnd.ms-excel ,浏览器就会提示要下载的文件是excel文件。

poi/jxl, jacob/jawin生成的是excel的biff格式。html/csv的是文本格式,不另存为excel文件,很多excel功能是用不了的。jacob/jawin需要服务器端是windows系统,且安装了excel2000以上版本。poi/jxl和html/csv方式的话,服务器端可以跨平台。

浏览器端生成excel文件还没有特别完善的方案,这是因为js无法处理二进制。大概有以下几个方案,各有利弊。

1. activex方式:使用js/vbs调用excel对象,http://setting.iteye.com/blog/219302

,有个extjs的gridpanel导出为excel的例子。 (ie+excel)

2. ie命令方式:将html或是csv输出到open的window,然后使用execCommand的saveas命令,存为csv或xls。 (ie only)

3. 服务器端中转方式:将html的table或是拼接的csv传到服务器端,服务器端再按照Content-Type:application/vnd.ms-excel返回,浏览器就会按excel方式处理。与服务器端拼接相比,少了一次取数操作。 (all)

4. data协议方式:对于支持data协议的浏览器,可以将html或是csv先用js base64处理,然后前缀data:application/vnd.ms-excel;base64,,即可使浏览器将其中的数据当做excel来处理,浏览器将提示下载或打开excel文件,可惜的是ie不支持。extjs的官网有一个grid的plugin,实现导出xhtml格式的伪excel文件,就是这么做的。 (except IE)

浏览器端只有第一种方案导出的是真正的biff格式的excel文件,其他方式都是文本格式。activex方式只能在windows平台的ie浏览器使用,而且需要降低ie的安全性,所以应用比较有限。复杂的excel文件,还是在服务器端用poi/jxl生成excel比较好。如果浏览器固定位ie,浏览器端方式2是最好的方案。如果要降低服务器端cpu的计算压力,客户端方案3可行,而且跨平台(比poi/jxl方式少了取数和生成二进制文件)。如果是非ie浏览器,方案4也不失为一种好方法。

 

ie命令方式:将html或是csv输出到open的window,然后使用execCommand的saveas命令,存为csv或xls。 (ie only)

具体js如下:

function saveCode(obj) { 

          var winname = window.open(\’\’, \’_blank\’, \’top=10000\’); 

          var strHTML = document.all.tableExcel.innerHTML; 

          winname.document.open(\’text/html\’, \’replace\’); 

          winname.document.writeln(strHTML); 

          winname.document.execCommand(\’saveas\’,\’\’,\’excelName.xls\’); 

          winname.close(); 

IE本来只能导出html或者csv格式,但是我们强行更改了文件后缀名。

 

data协议方式:对于支持data协议的浏览器,可以将html或是csv先用js base64处理,然后前缀data:application/vnd.ms-excel;base64,,即可使浏览器将其中的数据当做excel来处理,浏览器将提示下载或打开excel文件,可惜的是ie不支持。extjs的官网有一个grid的plugin,实现导出xhtml格式的伪excel文件,就是这么做的。 (except IE)
  •  具体js如下(template变量的内容因为新浪博客无法正常显示,只能用图片插入):
  • var tableToExcel = (function() {

 var uri = \’data:application/vnd.ms-excel;base64,\’, 

 template =​

 base64 = function(s) { return window.btoa((encodeURIComponent(s))) },

 format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }

 return function(table, name) {

   if (!table.nodeType) table = document.getElementByIdx_x_x_x_x_x_x(table)

   var ctx = {worksheet: name || \’Worksheet\’, table: table.innerHTML}

   window.location.href = uri + base64(format(template, ctx))

 }

})()

  • 其中format函数中m、p代表什么,理解如下:
  •  format = function(s, c){
  •  return s.replace(/{(\w+)}/g, function(m, p) {  
  •         console.log(m + “, ” + p);//打印参数。  
  •         return c[p];  
  •     })  
  • ​}  
  • 执行:  
  • console.log(format(“a{b}c”

, {b : “BBB”}));  

输出如下: 

{b}, b 

aBBBc <-最终结果。

正则表达式:/{(\w+)}/g,意思要全局匹配带有花括号并且之间至少一个字母的字符串,m是匹配成功的字符串,正则中的括号是得到匹配成功的字符传中分组匹配的结果,比如上面的例子,匹配 “a{b}c”,m 的值为{b},那么分组匹配的结果就是 b,改正则的意图:寻找出字符传s中花括号所包含的的字符对应的C的属性的值,替换掉整个花括号的内容。

\’ {table}\’,

版权声明:本文为swek原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/swek/articles/4337932.html