Extjs 从grid中导出Excel表格。后台为C#（绝对好用）

一、在程序中增加附件中js文件的引用：

二、定义一个导出Excel文件的函数：

function ExportExcel(gridPanel,config) {
    if (gridPanel) {
        var tmpStore = gridPanel.getStore();
        var tmpExportContent = '';

//以下处理分页grid数据导出的问题，从服务器中获取所有数据，需要考虑性能
        var tmpParam = Ext.ux.constructor(tmpStore.lastOptions);//此处克隆了原网格数据源的参数信息
              //此处作者原先为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.load(tmpParam);//获取所有数据
        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({
                    url: 'service/ExportServicePage.aspx',//将生成的xml发送到服务器端
                    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);
            }
        });
    }
};

 

ExportServicePage.aspx后台代码：

  protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                if (Request["ExportContent"] != "")

                {

                    string tmpFileName="export.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();

                }

            }

        }



 

 

其中前台用到的clone函数代码：(我用的时候没用着)

 

Ext.ux.clone = function(obj) {

    if (obj == null || typeof (obj) != 'object')

        return obj;

    if (Ext.isDate(obj))

        return obj.clone();

    var cloneArray = function(arr) {

        var len = arr.length;

        var out = [];

        if (len > 0) {

            for (var i = 0; i < len; ++i)

                out[i] = Ext.ux.clone(arr[i]);

        }

        return out;

    };

    var c = new obj.constructor();

    for (var prop in obj) {

        var p = obj[prop];

        if (Ext.isArray(p))

            c[prop] = cloneArray(p);

        else if (typeof p == 'object')

            c[prop] = Ext.ux.clone(p);

        else

            c[prop] = p;

    }

    return c;

};

 

三、需要导出时就可以这么使用了：
var config={
      store: null,//因为后续可能需要处理分页，因此此处一般不直接传递GridPanel的数据源
      title: ‘’//需要显示标题
    };
ExportExcel(MyGrid,config);

已知的不足：在FF下导出时，总是以文件名为XXXXX.xls.part的方式，不知道为什么，呵呵。

还有需要注意的一点，因为从客户端往服务器端传递xml字符串时，可能会因为安全性问题导致内容传递不上去，如果出现这种情况，可以在web.config的system.web节中增加<pages validaterequest="false"></pages>，如果不想针对所有页面都用此配置，也可以在指定页面设置就可以了，详细请参考MSDN。

 

来源：一起Ext
原文地址：http://www.17ext.com/showtopic-3008.aspx