Ext.grid.gridpanel excel 导出

本文介绍了一种解决ExtGrid导出Excel在JSP环境中不兼容的方法。通过创建隐藏form代替Ajax请求,确保了不同浏览器下导出功能的正常运行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

查看文章
  
[转]解决有关Ext Grid导出Excel在JSP等环境中不可用的问题
2010-05-06 15:43

转自:http://www.ajaxbbs.net/post/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); 
        }, 
        isUploadtrue
        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 Share
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值