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("<script>document.close();</script>");
                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();
            }
        }
    }
}