解决有关Ext Grid导出Excel在JSP等环境中不可用的问题
2010-03-02 19:21
459 查看
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”按钮点击执行的代码如下:
[/code]
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即可。
实现代码:
[/code]
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代码:
[/code]
<%
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
有关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); }
[/code]
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); }}
[/code]
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" )); %>
[/code]
<%
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
相关文章推荐
- 解决Ext Grid导出Excel在JSP等环境中文乱码问题(支持Windows和Aix)
- jsp 导出excel的格式有关问题
- 解决tableexport导出到excel中有关中文乱码的问题
- nginx +phpfastcgi 环境下 导出excel文件,超时,数据被截断问题,解决
- PHPExcel 在LINUX环境中导出乱码的问题解决
- jsp导出excel的问题。求高手解决!
- 如何解决gridview以及table导出Excel的科学计数法问题
- Ext导出Excel 小问题
- 解决Mantis中文环境下CSV导出乱码问题
- ThinkPHP 3.2 + PHPExcel 导入导出文件 第三方类库不能用问题解决
- GridView导出数据到excel数字变为科学记数法的问题的解决办法
- ReportViewer控件 Excel导出问题解决
- ASP.NET AJAX Advance Tips & Tricks (10) 解决使用AJAX Extender时的页面导出(Word/Excel)问题(Extender control 'XXX'
- 使用xml模板导出excel时遇到尖括号<>转义的问题解决
- jsp 关于导出excel 自动转换 科学计数法 显示的问题
- 扩展gridview的导出excel功能乱码问题的解决
- IE7.0下应用程序无法导出Excel文件的问题及解决
- 解决poi导出excel中文列宽问题
- ODBC导出Excel遇到的表名错误问题解决(excel 2007)
- JAVA通过poi对Excel数据在(jsp+ssh)环境下导入导出