extjs 导出excel

Extjs — Grid数据导出成Excel

最近因为项目问题,需要解决Extjs导出成Excel的问题。

下面简单描述这个问题解决的步骤如下:

1、先在js文件里写了一个button的handler事件,通过点击按钮,来实现调用ExportExcel(GridPanel,{store:null, title: ' '})

ExportExcel方法的源码如下:

复制代码
/** Execl导出方法 **/ function ExportExcel(gridPanel, config) { if (gridPanel) { var tmpStore = gridPanel.getStore(); var tmpExportContent = ''; //以下处理分页grid数据导出的问题,从服务器中获取所有数据,需要考虑性能 var tmpParam = Ext.ux.clone(tmpStore.lastOptions); //此处克隆了原网格数据源的参数信息 if (tmpParam && tmpParam.params) {
            delete (tmpParam.params[tmpStore.paramNames.start]); //删除分页参数 delete (tmpParam.params[tmpStore.paramNames.limit]);
        } var tmpAllStore = new Ext.data.GroupingStore({//重新定义一个数据源  proxy: tmpStore.proxy,
            reader: tmpStore.reader
        });
        tmpAllStore.on('load', function (store) {
            config.store = store;
            tmpExportContent = gridPanel.getExcelXml(false, config); //此方法用到了一中的扩展 if (Ext.isIE || Ext.isSafari || Ext.isSafari2 || Ext.isSafari3) {//在这几种浏览器中才需要,IE8测试不能直接下载了 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({ //将生成的xml发送到服务器端,需特别注意这个页面的地址 url: 'GridToExcel.aspx',                       
                    method: 'POST',
                    form: Ext.fly('frmDummy'),
                    callback: function (o, s, r) { //alert(r.responseText);  },
                    isUpload: true, params: { ExportContent: tmpExportContent, ExportFile: gridPanel.id + '.xls' }
                });
            } else {
                document.location = 'data:application/vnd.ms-excel;base64,' + Base64.encode(tmpExportContent);
            }
        });
        tmpAllStore.load(tmpParam); //获取所有数据  }
};
复制代码

同时需要在引用了上面js文件的 html文件/aspx文件里 再引用一个GridToExecl.js文件,因为代码太多了,所以我把它上传了,就不贴代码了。

 GridToExecl.js

 

2、GridToExcel.aspx页面的相关代码:

前台:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridToExecl.aspx.cs" Inherits="GridToExecl" ValidateRequest="false" %> //ValidateRequest = "false"非常重要,缺少它,IE系列浏览器不能正常导出

后台:

复制代码
public partial class GridToExcel : System.Web.UI.Page
{ protected void Page_Load(object sender, EventArgs e)
    { if (!IsPostBack)
        { if (Request["ExportContent"] != "")
            { string tmpFileName = "excel.xls"; string tmpContent = Request["ExportContent"];//获取传递上来的文件内容 if (Request["ExportFile"] != "")
                {
                    tmpFileName = Request["ExportFile"];//获取传递上来的文件名 tmpFileName = System.Web.HttpUtility.UrlEncode(Request.ContentEncoding.GetBytes(tmpFileName));//处理中文文件名的情况   }
                Response.Write("&amp;lt;script&amp;gt;document.close();&amp;lt;/script&amp;gt;");
                Response.Clear();
                Response.Buffer = true;
                Response.ContentType = "application/vnd.ms-excel";
                Response.AddHeader("Content-Disposition", "attachment;filename=\"" + tmpFileName + "\"");
                Response.Charset = ""; this.EnableViewState = false;
                System.IO.StringWriter tmpSW = new System.IO.StringWriter();
                System.Web.UI.HtmlTextWriter tmpHTW = new System.Web.UI.HtmlTextWriter(tmpSW);
                tmpHTW.WriteLine(tmpContent);
                Response.Write(tmpSW.ToString());
                Response.End();
            }
        }
    }

你可能感兴趣的:(extjs 导出excel)