码农往事
我的代码为什么这么丑?一定是因为我长的不好看
posts - 29,comments - 86,trackbacks - 0
这两天项目上要求做一个导出Excel的功能,项目前台用的ExtJS,后台用的JAVA,网上查了查,大概有3种做法。
1.apache公司提供的POI
2.韩国公司的JXL
3.据说是官方提供的JS调用方法
前两种都要引入外包,懒得找包了,采用了第三种,所需引入JS代码如下:
/Files/rockblue1988/export.txt 
/**
 * allows for downloading of grid data (store) directly into excel
 * Method: extracts data of gridPanel store, uses columnModel to construct XML excel document,
 * converts to Base64, then loads everything into a data URL link.
 *
 * 
@author        Animal        <extjs support team>
 *
 
*/

/**
 * base64 encode / decode
 *
 * @location     
http://www.webtoolkit.info/
 *
 
*/

var Base64 
= (function() {
    
// Private property
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

    
// Private method for UTF-8 encoding
    function utf8Encode(string) {
        string 
= string.replace(/\r\n/g,"\n");
        var utftext 
= "";
        
for (var n = 0; n < string.length; n++) {
            var c 
= string.charCodeAt(n);
            
if (c < 128) {
                utftext 
+= String.fromCharCode(c);
            }
            
else if((c > 127&& (c < 2048)) {
                utftext 
+= String.fromCharCode((c >> 6| 192);
                utftext 
+= String.fromCharCode((c & 63| 128);
            }
            
else {
                utftext 
+= String.fromCharCode((c >> 12| 224);
                utftext 
+= String.fromCharCode(((c >> 6& 63| 128);
                utftext 
+= String.fromCharCode((c & 63| 128);
            }
        }
        
return utftext;
    }

    
// Public method for encoding
    return {
        encode : (typeof btoa 
== 'function'? function(input) {
            
return btoa(utf8Encode(input));
        } : function (input) {
            var output 
= "";
            var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
            var i 
= 0;
            input 
= utf8Encode(input);
            
while (i < input.length) {
                chr1 
= input.charCodeAt(i++);
                chr2 
= input.charCodeAt(i++);
                chr3 
= input.charCodeAt(i++);
                enc1 
= chr1 >> 2;
                enc2 
= ((chr1 & 3<< 4| (chr2 >> 4);
                enc3 
= ((chr2 & 15<< 2| (chr3 >> 6);
                enc4 
= chr3 & 63;
                
if (isNaN(chr2)) {
                    enc3 
= enc4 = 64;
                } 
else if (isNaN(chr3)) {
                    enc4 
= 64;
                }
                output 
= output +
                keyStr.charAt(enc1) 
+ keyStr.charAt(enc2) +
                keyStr.charAt(enc3) 
+ keyStr.charAt(enc4);
            }
            
return output;
        }
    };
})();

Ext.override(Ext.grid.GridPanel, {
    getExcelXml: function(includeHidden) {
        var worksheet 
= this.createWorksheet(includeHidden);
        var totalWidth 
= this.getColumnModel().getTotalWidth(includeHidden);
        
return '<xml version="1.0" encoding="utf-8">' +
            
'<ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:o="urn:schemas-microsoft-com:office:office">' +
            
'<o:DocumentProperties><o:Title>' + this.title + '</o:Title></o:DocumentProperties>' +
            
'<ss:ExcelWorkbook>' +
            
'<ss:WindowHeight>' + worksheet.height + '</ss:WindowHeight>' +
            
'<ss:WindowWidth>' + worksheet.width + '</ss:WindowWidth>' +
            
'<ss:ProtectStructure>False</ss:ProtectStructure>' +
            
'<ss:ProtectWindows>False</ss:ProtectWindows>' +
            
'</ss:ExcelWorkbook>' +
            
'<ss:Styles>' +
            
'<ss:Style ss:ID="Default">' +
            
'<ss:Alignment ss:Vertical="Top" ss:WrapText="1" />' +
            
'<ss:Font ss:FontName="arial" ss:Size="10" />' +
            
'<ss:Borders>' +
            
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Top" />' +
            
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Bottom" />' +
            
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Left" />' +
            
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Right" />' +
            
'</ss:Borders>' +
            
'<ss:Interior />' +
            
'<ss:NumberFormat />' +
            
'<ss:Protection />' +
            
'</ss:Style>' +
            
'<ss:Style ss:ID="title">' +
            
'<ss:Borders />' +
            
'<ss:Font />' +
            
'<ss:Alignment ss:WrapText="1" ss:Vertical="Center" ss:Horizontal="Center" />' +
            
'<ss:NumberFormat ss:Format="@" />' +
            
'</ss:Style>' +
            
'<ss:Style ss:ID="headercell">' +
            
'<ss:Font ss:Bold="1" ss:Size="10" />' +
            
'<ss:Alignment ss:WrapText="1" ss:Horizontal="Center" />' +
            
'<ss:Interior ss:Pattern="Solid" ss:Color="#A3C9F1" />' +
            
'</ss:Style>' +
            
'<ss:Style ss:ID="even">' +
            
'<ss:Interior ss:Pattern="Solid" ss:Color="#CCFFFF" />' +
            
'</ss:Style>' +
            
'<ss:Style ss:Parent="even" ss:ID="evendate">' +
            
'<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
            
'</ss:Style>' +
            
'<ss:Style ss:Parent="even" ss:ID="evenint">' +
            
'<ss:NumberFormat ss:Format="0" />' +
            
'</ss:Style>' +
            
'<ss:Style ss:Parent="even" ss:ID="evenfloat">' +
            
'<ss:NumberFormat ss:Format="0.00" />' +
            
'</ss:Style>' +
            
'<ss:Style ss:ID="odd">' +
            
'<ss:Interior ss:Pattern="Solid" ss:Color="#CCCCFF" />' +
            
'</ss:Style>' +
            
'<ss:Style ss:Parent="odd" ss:ID="odddate">' +
            
'<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
            
'</ss:Style>' +
            
'<ss:Style ss:Parent="odd" ss:ID="oddint">' +
            
'<ss:NumberFormat ss:Format="0" />' +
            
'</ss:Style>' +
            
'<ss:Style ss:Parent="odd" ss:ID="oddfloat">' +
            
'<ss:NumberFormat ss:Format="0.00" />' +
            
'</ss:Style>' +
            
'</ss:Styles>' +
            worksheet.xml 
+
            
'</ss:Workbook>';
    },

    createWorksheet: function(includeHidden) {
        
// Calculate cell data types and extra class names which affect formatting
        var cellType = [];
        var cellTypeClass 
= [];
        var cm 
= this.getColumnModel();
        var totalWidthInPixels 
= 0;
        var colXml 
= '';
        var headerXml 
= '';
        var visibleColumnCountReduction 
= 0;
        var colCount 
= cm.getColumnCount();
        
for (var i = 0; i < colCount; i++) {
            
if ((cm.getDataIndex(i) != '')
                
&& (includeHidden || !cm.isHidden(i))) {
                var w 
= cm.getColumnWidth(i)
                totalWidthInPixels 
+= w;
                
if (cm.getColumnHeader(i) === ""){
                    cellType.push(
"None");
                    cellTypeClass.push(
"");
                    
++visibleColumnCountReduction;
                }
                
else
                {
                    colXml 
+= '<ss:Column ss:AutoFitWidth="1" ss:Width="' + w + '" />';
                    headerXml 
+= '<ss:Cell ss:StyleID="headercell">' +
                        
'<ss:Data ss:Type="String">' + cm.getColumnHeader(i) + '</ss:Data>' +
                        
'<ss:NamedCell ss:Name="Print_Titles" /></ss:Cell>';
                    var fld 
= this.store.recordType.prototype.fields.get(cm.getDataIndex(i));
                    
switch(fld.type) {
                        
case "int":
                            cellType.push(
"Number");
                            cellTypeClass.push(
"int");
                            
break;
                        
case "float":
                            cellType.push(
"Number");
                            cellTypeClass.push(
"float");
                            
break;
                        
case "bool":
                        
case "boolean":
                            cellType.push(
"String");
                            cellTypeClass.push(
"");
                            
break;
                        
case "date":
                            cellType.push(
"DateTime");
                            cellTypeClass.push(
"date");
                            
break;
                        
default:
                            cellType.push(
"String");
                            cellTypeClass.push(
"");
                            
break;
                    }
                }
            }
        }
        var visibleColumnCount 
= cellType.length - visibleColumnCountReduction;

        var result 
= {
            height: 
9000,
            width: Math.floor(totalWidthInPixels 
* 30+ 50
        };

        
// Generate worksheet header details.
        var t = '<ss:Worksheet ss:Name="' + this.title + '">' +
            
'<ss:Names>' +
            
'<ss:NamedRange ss:Name="Print_Titles" ss:RefersTo="=\'' + this.title + '\'!R1:R2" />' +
            
'</ss:Names>' +
            
'<ss:Table x:FullRows="1" x:FullColumns="1"' +
            
' ss:ExpandedColumnCount="' + (visibleColumnCount + 2+
            
'" ss:ExpandedRowCount="' + (this.store.getCount() + 2+ '">' +
            colXml 
+
            
'<ss:Row ss:Height="38">' +
            
'<ss:Cell ss:StyleID="title" ss:MergeAcross="' + (visibleColumnCount - 1+ '">' +
            
'<ss:Data xmlns:html="http://www.w3.org/TR/REC-html40" ss:Type="String">' +
            
'<html:B></html:B></ss:Data><ss:NamedCell ss:Name="Print_Titles" />' +
            
'</ss:Cell>' +
            
'</ss:Row>' +
            
'<ss:Row ss:AutoFitHeight="1">' +
            headerXml 
+
            
'</ss:Row>';

        
// Generate the data rows from the data in the Store
        for (var i = 0, it = this.store.data.items, l = it.length; i < l; i++) {
            t 
+= '<ss:Row>';
            var cellClass 
= (i & 1? 'odd' : 'even';
            r 
= it[i].data;
            var k 
= 0;
            
for (var j = 0; j < colCount; j++) {
                
if ((cm.getDataIndex(j) != '')
                    
&& (includeHidden || !cm.isHidden(j))) {
                    var v 
= r[cm.getDataIndex(j)];
                    
if (cellType[k] !== "None") {
                        t 
+= '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ss:Data ss:Type="' + cellType[k] + '">';
                        
if (cellType[k] == 'DateTime') {
                            t 
+= v.format('Y-m-d');
                        } 
else {
                            t 
+= v;
                        }
                        t 
+='</ss:Data></ss:Cell>';
                    }
                    k
++;
                }
            }
            t 
+= '</ss:Row>';
        }

        result.xml 
= t + '</ss:Table>' +
            
'<x:WorksheetOptions>' +
            
'<x:PageSetup>' +
            
'<x:Layout x:CenterHorizontal="1" x:Orientation="Landscape" />' +
            
'<x:Footer x:Data="Page &amp;P of &amp;N" x:Margin="0.5" />' +
            
'<x:PageMargins x:Top="0.5" x:Right="0.5" x:Left="0.5" x:Bottom="0.8" />' +
            
'</x:PageSetup>' +
            
'<x:FitToPage />' +
            
'<x:Print>' +
            
'<x:PrintErrors>Blank</x:PrintErrors>' +
            
'<x:FitWidth>1</x:FitWidth>' +
            
'<x:FitHeight>32767</x:FitHeight>' +
            
'<x:ValidPrinterInfo />' +
            
'<x:VerticalResolution>600</x:VerticalResolution>' +
            
'</x:Print>' +
            
'<x:Selected />' +
            
'<x:DoNotDisplayGridlines />' +
            
'<x:ProtectObjects>False</x:ProtectObjects>' +
            
'<x:ProtectScenarios>False</x:ProtectScenarios>' +
            
'</x:WorksheetOptions>' +
            
'</ss:Worksheet>';
        
return result;
    }
});
ExtJS中的导出按钮代码如下:
{
                            text : 
"导出到excel",
                            style : {
                                marginRight : 
'20px'
                            },
                            handler : function() {
                                var vExportContent 
= gridpanel.getExcelXml(); //获取数据
                            if (Ext.isIE8||Ext.isIE6 || Ext.isIE7 || Ext.isSafari
                                    
|| Ext.isSafari2 || Ext.isSafari3) { //判断浏览器

                                var fd 
= Ext.get('frmDummy');
                                
if (!fd) {
                                    fd 
= Ext.DomHelper.append(
                                            Ext.getBody(), {
                                                tag : 
'form',
                                                method : 
'post',
                                                id : 
'frmDummy',
                                                action : 
'exportUrl.jsp',
                                                target : 
'_blank',
                                                name : 
'frmDummy',
                                                cls : 
'x-hidden',
                                                cn : [ {
                                                    tag : 
'input',
                                                    name : 
'exportContent',
                                                    id : 
'exportContent',
                                                    type : 
'hidden'
                                                } ]
                                            }, 
true);
                                    
                                }
                                fd.child(
'#exportContent').set( {
                                    value : vExportContent
                                });
                                fd.dom.submit();
                            } 
else {
                                document.location 
= 'data:application/vnd.ms-excel;base64,' + Base64
                                        .encode(vExportContent);
                            }
                        }}
exportUrl.jsp页面的代码如下:
<%
response.setHeader(
"Content-Type","application/force-download");
response.setHeader(
"Content-Type","application/vnd.ms-excel");
response.setHeader(
"Content-Disposition","attachment;filename=export.xls");
out.print(request.getParameter(
"exportContent"));
%>
注意事项:
1.exportUrl.jsp的页面只需要以上的代码,多余的都不要了,否则生成的excel文件内容为Null
2.生成的xls文件在Excel打开过程中可能会出现如下错误:
---
加载期间在下述区域中出现了问题(P):
表格
由于错误,此文件无法打开。错误列于:C:\Documents and Settings\..\Local Settings\Temporary Internet
---

这是由于输入的数据中存在空格或者与设置中的类型不符,我遇到的问题就是由于Columns中的header中有类似于“日吨水<br>综合费”这样的属性而产生的,修改即可
3.在Google、FireFox、IE8/IE9测试通过
posted on 2012-02-29 11:21 Jimi 阅读(18235) 评论(28)  编辑  收藏 所属分类: ExtJS

FeedBack:
# re: ExtJS 导出 Excel
2012-06-14 08:58 | 马祥建
你好,请教一个问题 ...
我的qq:381662973
extjs导出excel有点问题  回复  更多评论
  
# re: ExtJS 导出 Excel
2012-06-14 08:59 | 马祥建
在ie9下不行,FF下可以,谷歌也不行
非常感谢  回复  更多评论
  
# re: ExtJS 导出 Excel
2012-06-14 11:35 | 马祥建
解决了  回复  更多评论
  
# re: ExtJS 导出 Excel
2012-06-21 00:12 | Jimi Hendrix
@马祥建
解决了就好。呵呵,上个礼拜太忙了没注意。
代码是网上分享的,兼容性我是修改下面的地方就好了,
if (Ext.isIE8||Ext.isIE6 || Ext.isIE7 || Ext.isSafari|| Ext.isSafari2 || Ext.isSafari3)
  回复  更多评论
  
# re: ExtJS 导出 Excel
2012-09-12 15:20 | fanf
@马祥建
怎么解决的呢??  回复  更多评论
  
# re: ExtJS 导出 Excel
2012-09-12 17:29 | Jimi Hendrix
@fanf
if (Ext.isIE8||Ext.isIE6 || Ext.isIE7 || Ext.isSafari|| Ext.isSafari2 || Ext.isSafari3)
添加IE9
if (Ext.isIE9||Ext.isIE8||Ext.isIE6 || Ext.isIE7 || Ext.isSafari|| Ext.isSafari2 || Ext.isSafari3)
这个方式导出的Excel只能对应exce版本,WPS不识别,不是很好用。
可以的话试试别的方式  回复  更多评论
  
# re: ExtJS 导出 Excel[未登录]
2012-10-19 09:06 | 卡卡
引入那个js文件时,报错:
TypeError: Ext.grid is undefined
Ext.override(Ext.grid.Panel, {  回复  更多评论
  
# re: ExtJS 导出 Excel
2012-10-22 17:34 | Jimi Hendrix
@卡卡
这个代码是在ExtJS的框架里实现的  回复  更多评论
  
# re: ExtJS 导出 Excel
2012-11-02 13:55 | jiadebin
你好,我也想使用这种方法导出,但是我想保存在服务端,而不是下载到客户端,请问如何实现??  回复  更多评论
  
# re: ExtJS 导出 Excel
2012-12-31 10:40 | 10耗子
感谢,受教  回复  更多评论
  
# re: ExtJS 导出 Excel
2013-03-06 11:36 | zhengc
加载期间在下述区域中出现了问题(P):
表格
由于错误,此文件无法打开。错误列于:C:\Documents and Settings\..\Local Settings\Temporary Internet
---
这是由于输入的数据中存在空格或者与设置中的类型不符,我遇到的问题就是由于Columns中的header中有类似于“日吨水<br>综合费”这样的属性而产生的,修改即可
我的列没有特殊属性,怎么也报错呢?  回复  更多评论
  
# re: ExtJS 导出 Excel
2013-05-30 09:50 | five
@Jimi Hendrix
wps怎么导出呢  回复  更多评论
  
# re: ExtJS 导出 Excel
2013-06-01 23:17 | Jimi Hendrix
@five
WPS兼容Excel  回复  更多评论
  
# re: ExtJS 导出 Excel
2013-07-12 15:38 | baron
@five
请教一下,用这个方法
导出的Excel 用wps 打不开。。怎么解决啊。  回复  更多评论
  
# re: ExtJS 导出 Excel[未登录]
2013-09-17 10:37 | yang
导出excel只显示第一页的内容  回复  更多评论
  
# re: ExtJS 导出 Excel[未登录]
2013-09-17 10:38 | yang
我的Q871266506  回复  更多评论
  
# re: ExtJS 导出 Excel
2013-10-16 15:49 | 校风
那个export.txt怎么引用到Ext里面去  回复  更多评论
  
# re: ExtJS 导出 Excel[未登录]
2014-01-25 18:06 | hi
frmDummy这是什么  回复  更多评论
  
# re: ExtJS 导出 Excel
2014-02-25 11:08 | 爱爱爱
Ext4.1上不兼容,一些方法4.1上没用!!!  回复  更多评论
  
# re: ExtJS 导出 Excel
2014-03-13 10:56 | 雨落
@卡卡
@爱爱爱
我也是使用4.1的,也没解决,请问你解决了么,可以加下我扣扣么:1491666096  回复  更多评论
  
# re: ExtJS 导出 Excel
2014-08-28 09:00 | 编码小王
不知道作者你现在是否还关注这个,我昨天使用你的代码,excle是能导出来,但是中文是乱码的,一直不知道怎么解决,如果你能看到这个,请加我qq好吗 万分感谢  回复  更多评论
  
# re: ExtJS 导出 Excel
2014-08-28 09:01 | 编码小王
我扣扣 303073768
  回复  更多评论
  
# re: ExtJS 导出 Excel
2014-09-03 14:02 | Java小白
gridpanel没有getExcelXml方法  回复  更多评论
  
# re: ExtJS 导出 Excel
2014-09-03 14:04 | Java小白
我qq-》1154489127
  回复  更多评论
  
# re: ExtJS 导出 Excel
2014-10-24 17:12 | 陌路
导出Excel表,当数据量较大时报空指针异常错误,数据量少时可以正常导出,什么原因?加我Q:1208436356  回复  更多评论
  
# re: ExtJS 导出 Excel
2014-12-08 08:55 | rayne
@陌路
我也碰到类似问题,请问你解决了没有?  回复  更多评论
  
# re: ExtJS 导出 Excel
2015-01-04 15:37 | 陌路
@rayne
还没有,查了好多资料,不知道怎么解决。。。。  回复  更多评论
  
# re: ExtJS 导出 Excel
2016-07-28 23:01 | fancel
导出来的数字是文本内容,无法计算,有解决的方式么?  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: