解决有关Ext Grid导出Excel在JSP等环境中不可用的问题

http://www.ajaxbbs.net/post/extjs/10.html

 

 

有关ExtGrid导出Excel的实现方式，网上已经有很多，官方也给出了一个方案，代码不是很完善，不过已经有高人对这个进行了修正。具体实现方式及代码我这里就不再多说了，大家可以参看： http://www.dojochina.com/index.php?q=node/1254 ，附件： gridToExcel.js.txt

其基本思想是： 客户端根据Grid数据生成Excel格式的XML数据，然后发送到一个服务端文件，服务端文件通过设定Content-Type来实现Excel的下载。

其中“导出Excel”按钮点击执行的代码如下：

var
 vExportContent = grid.getExcelXml(); 

if
 (Ext.isIE6 || Ext.isIE7 || Ext.isSafari || Ext.isSafari2 || Ext.isSafari3) { 

    if
 (! Ext.fly('frmDummy'
)) { 

        var
 frm = document
.createElement('form'
); 

        frm.id = 'frmDummy'
; 

        frm.name = id; 

        frm.className = 'x-hidden'
; 

        document
.body.appendChild(frm); 

    } 

    Ext.Ajax.request({ 

        url: '/exportexcel.php'
, 

        method: 'POST'
, 

        form: Ext.fly('frmDummy'
), 

        callback: function
(o, s, r) { 

            //alert(r.responseText);
 

        }, 

        isUpload

: true
, 

        params: {exportContent: vExportContent} 

    }) 

} else
 { 

    document
.location = 'data:application/vnd.ms-excel;base64,'
 + Base64.encode(vExportContent); 

} 

var vExportContent = grid.getExcelXml(); if (Ext.isIE6 || Ext.isIE7 || Ext.isSafari || Ext.isSafari2 || Ext.isSafari3) { if (! Ext.fly('frmDummy')) { var frm = document.createElement('form'); frm.id = 'frmDummy'; frm.name = id; frm.className = 'x-hidden'; document.body.appendChild(frm); } Ext.Ajax.request({ url: '/exportexcel.php', method: 'POST', form: Ext.fly('frmDummy'), callback: function(o, s, r) { //alert(r.responseText); }, isUpload: true, params: {exportContent: vExportContent} }) } else { document.location = 'data:application/vnd.ms-excel;base64,' + Base64.encode(vExportContent); } 例子中服务端使用的PHP，这段代码在PHP中可能可以很好的工作，但是如果到了JSP等环境下，就出现了问题，导出数据可能是空。

问题出在哪里呢？上面这部分代码中的ajax提交其实并不是真正的ajax提交，因为ajax提交是在后台执行，因此不可能实现下载，可以看到这里有form和isUpload两个参数：Ext的ajax请求中如果配置了isUpload:true，则其ajax就不是真正的ajax请求，而是通过创建一个隐藏的Iframe，并通过form的target指向这个iframe来提交数据，并且发送的header里将content-type设为了multipart/form ，在JSP中不能成功导出的原因就在这里。这样的提交方式其参数通过request.getParameter是取不到的，当然你可以使用上传组件来获取，但这样代码就变得复杂。

下面来解决这个问题，既然这里的Ajax使用是一个模拟的form提交，那我们其实可以完全不用。我们直接用form提交不是更省事吗？

解决办法如下： 创建一个隐藏form，其target设置为_blank，然后在其内部创建一个隐藏域存放xml数据，然后通过POST方式提交这个form即可。
实现代码：

var
 vExportContent = grid.getExcelXml(); 

if
 (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:'exportexcel.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); 

}} 

var vExportContent = grid.getExcelXml(); if (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:'exportexcel.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); }} 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"
)); 

%>  

<% 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")); %> 完整代码下载： grid2excel.rar