永利最大(官方)网站

产品

产品
资讯
资源
视频
学院
示例

产品中心
解决方案
行业方案
视频课程
关于慧都

热门产品

UI界面: DevExpress telerik BCGSoft Developer Machines

文档管理: Aspose E-iceblue GrapeCity PDFlib

图表控件: LightningChart Steema Iocomp

数据采集: TAKEBISHI Matrikon Kepware Cogent DataHub GENESIS64

思维导图: TheBrain XMind

开发工具: IntelliJ IDEA MyEclipse Zend PyCharm WebStorm CLion

报表控件: Fast Report Stimulsoft GrapeCity

加密解密: VMPsoft Eziriz Oreans

项目管理: DHTMLX NETRONIC

数据库管理: Devart PremiumSoft

条码工具: Bartender Softek Dynamsoft TEC-IT Byte Aspose.BarCode

解决方案

软件定制解决方案: 软件系统定制高端UI定制业务系统定制

智能制造解决方案: OMES制造执行系统 APS生产排程系统 OQMS质检管理系统 OPTS生产溯源系统 OTPM设备管理系统 OKanban看板管理 DA工业数据采集系统 SRM供应商管理 PDM产品数据管理 WMS仓储管理 OMES ProLine产线MES系统

行业方案

制造行业: 磁性材料行业hot 汽车零配件行业电子行业精密装配行业钣金行业机械加工行业汽车改装行业金属薄膜材料行业灯具照明行业电线电缆行业钢结构行业

其他行业: 石油行业hot 医疗行业金融行业建筑行业

视频课程

产品视频: UI界面类图标报表网络通讯文档管理矢量图像处理位图图像处理音频视频文件格式转码条形码加密解密测试分析地图/CAD/GIS BI/大数据算法工作流 UML 数据库/服务器 IDE 项目管理思维导图其他移动开发扫描识别条形码

学院课程: VIP视频免费视频用户界面图表报表文档管理大数据工作流项目管理测试分析往期公开课项目管理其他

企业培训: 定制培训班

关于慧都

慧都简介慧都文化联系我们合作伙伴典型客户

永利最大(官方)网站 > 资讯 > ExtAspNet应用技巧（十） - Grid导出为Excel文件（续）

ExtAspNet应用技巧（十） - Grid导出为Excel文件（续）

原创|其它|编辑：郝浩|2009-08-26 11:33:58.000|阅读 1470 次

概述：这个其实是开发中经常遇到的问题，大家也都知道其实所谓导出到Excel文件，最简单的做法就是把一个table的HTML片段输出，下面通过一个简单的例子来说明这个问题。

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

轻车熟路
书接上文，如何在使用控件库的页面将Grid内容导出为Excel文件？

1. 页面声明

<ext:PageManager ID="PageManager1" runat="server" /> 
Grid Control in ExtAspNet： 
<ext:Grid ID="Grid1" Title="表格" ShowBorder="true" ShowHeader="true" Width="900px"
    AutoHeight="true" runat="server" EnableCheckBoxSelect="true" DataKeyNames="Id,Year,MyText"
    EnableRowNumber="True"> 
    <Columns> 
        <ext:BoundField DataTooltipField="MyText" Width="200px" DataField="MyText" DataFormatString="{0}"
            HeaderText="MyText" ExpandUnusedSpace="True" /> 
        <ext:BoundField ColumnId="column1" Width="100px" DataField="MyValue" HeaderText="MyValue" /> 
        <ext:BoundField Width="60px" DataField="Year" HeaderText="Year" /> 
        <ext:CheckBoxField DataTooltipField="MyText" Width="60px" RenderAsStaticField="true"
            DataField="MyCheckBox" HeaderText="CheckBox" /> 
        <ext:HyperLinkField DataTooltipField="MyText" Width="200px" HeaderText="HyperLink"
            DataTextField="MyText" DataTextFormatString="{0}" DataNavigateUrlFields="Id,MyValue"
            DataNavigateUrlFormatString="{0}&page={1}" Target="_blank"
            NavigateUrl="~/alert.aspx" Text="链接" /> 
        <ext:TemplateField HeaderText="TemplateField"> 
            <ItemTemplate> 
                <%# GetMyValue(DataBinder.Eval(Container.DataItem, "[MyValue]")) %> 
            </ItemTemplate> 
        </ext:TemplateField> 
        <ext:ImageField DataTooltipField="MyText" Width="60px" DataImageUrlField="MyValue"
            DataImageUrlFormatString="~/images/16/{0}.gif" HeaderText="Image"></ext:ImageField> 
    </Columns> 
</ext:Grid> 
<br /> 
<ext:Button ID="Button1" EnableAjax="false" 
    runat="server" Text="导出ExtAspNet控件Grid到Excel文件" OnClick="Button1_Click"> 
</ext:Button> 

这里需要说明一点：因为点击“导出”按钮会改变响应消息头，使用AJAX就不合适了。所以我们设置Button的EnableAjax="false"，当然你也可以设置PageManager的这个属性，那会影响整个页面。

2. 后台数据绑定。这个同样省略，无非是从数据库读出一个DataTable或者List绑定到Grid控件。

3. 生成的页面：

4. 点击导出按钮的事件处理

protected void Button1_Click(object sender, EventArgs e) 
{ 
    Response.ClearContent(); 
    Response.AddHeader("content-disposition", "attachment; filename=MyExcelFile.xls"); 
    Response.ContentType = "application/excel"; 
    StringWriter sw = new StringWriter(); 
    HtmlTextWriter htw = new HtmlTextWriter(sw); 
    Grid1.RenderControl(htw); 
    Response.Write(sw.ToString()); 
    Response.End(); 
} 

5. 生成的MyExcelFile.xls文件（用记事本打开）：

1.<div id="Grid1_wrapper" style="display:inline;"></div>

问题出现

如果你理解Extjs的工作原理的话，这个结果并不奇怪。
Grid渲染到页面中的只有一个简单的DIV标签，至于内部的所有的内容都是通过JavaScript来生成的，这个JavaScript就隐藏在页面的底部，如果你观察过ExtAspNet生成的页面的话，你能看到类似的Grid初始化代码：

看来对于使用extjs的ExtAspNet控件而言，我们不能照搬Asp.Net中的GridView的模式，我们需要...

另辟蹊径

仔细观察Button1_Click事件处理函数，它做的事情很简单 - 向输出流写入一个字符串，这个字符串就是一个HTML的表格。那我们何不手工来生成这个表格？

不用怕，问题没有你想的那么复杂：

protected void Button1_Click(object sender, EventArgs e) 
{ 
    Response.ClearContent(); 
    Response.AddHeader("content-disposition", "attachment; filename=MyExcelFile.xls"); 
    Response.ContentType = "application/excel"; 
    Response.Write(GetGridTableHtml(Grid1)); 
    Response.End(); 
} 
private string GetGridTableHtml(Grid grid) 
{ 
    StringBuilder sb = new StringBuilder(); 
    sb.Append("<table cellspacing=\"0\" rules=\"all\" border=\"1\" style=\"border-collapse:collapse;\">"); 
    sb.Append("<tr>"); 
    foreach (GridColumn column in grid.Columns) 
    { 
        sb.AppendFormat("<td>{0}</td>", column.HeaderText); 
    } 
    sb.Append("</tr>"); 
    foreach (GridRow row in grid.Rows) 
    { 
        sb.Append("<tr>"); 
        foreach (object value in row.Values) 
        { 
            string html = value.ToString(); 
            sb.AppendFormat("<td>{0}</td>", html); 
        } 
        sb.Append("</tr>"); 
    } 
    sb.Append("</table>"); 
    return sb.ToString(); 
} 

不就是生成一个HTML的表格嘛，这个事情我做过无数次了，拍拍手来看下成果：

继续优化

还是两个地方不满意，我们看下CheckBox的那个地方生成的HTML代码：

<!-- 选中的CheckBox -->
<div ext:qtip="item2" class="box-grid-static-checkbox"> 
</div> 
<!-- 没有选中的CheckBox -->
<div ext:qtip="item3，我是一个很厉害的程序员。" class="box-grid-static-checkbox box-grid-static-checkbox-uncheck"> 
</div> 

可见这里并没有像Asp.Net的GridView那样生成 input type="checkbox" 的标签，而是通过CSS样式来控制是否选中（说白了就是不同的背景图片）。

有了这些认识后，优化也很简单：

private string GetGridTableHtml(Grid grid) 
{ 
    StringBuilder sb = new StringBuilder(); 
    sb.Append("<table cellspacing=\"0\" rules=\"all\" border=\"1\" style=\"border-collapse:collapse;\">"); 
    sb.Append("<tr>"); 
    foreach (GridColumn column in grid.Columns) 
    { 
        sb.AppendFormat("<td>{0}</td>", column.HeaderText); 
    } 
    sb.Append("</tr>"); 
    foreach (GridRow row in grid.Rows) 
    { 
        sb.Append("<tr>"); 
        foreach (object value in row.Values) 
        { 
            string html = value.ToString(); 
            // 处理CheckBox 
            if (html.Contains("box-grid-static-checkbox")) 
            { 
                if (html.Contains("box-grid-static-checkbox-uncheck")) 
                { 
                    html = "×"; 
                } 
                else
                { 
                    html = "√"; 
                } 
            } 
            // 处理图片 
            if (html.Contains("<img")) 
            { 
                html = html.Replace("src=\"/extaspnet/", "src=\""); 
            } 
            sb.AppendFormat("<td>{0}</td>", html); 
        } 
        sb.Append("</tr>"); 
    } 
    sb.Append("</table>"); 
    return sb.ToString(); 
} 

再来看下生成的XLS文件，这已经是我们想要的结果了。

修正一个小BUG

还有一个小问题，就是在导出文件之后，按钮不可点击了，如下所示：

其实这是ExtAspNet的一个内置特性，是为了防止重复点击同一个按钮两次。一般情况下在AJAX之后系统会自动让此按钮可点击（非AJAX页面会刷新）。

但是这里有点特殊，导出Excel文件并没有导致页面刷新，所以我们需要给Button设置一个属性，使其在点击时不要变灰。

<ext:Button ID="Button1" EnableAjax="false" DisableControlBeforePostBack="false"
    runat="server" Text="导出ExtAspNet控件Grid到Excel文件" OnClick="Button1_Click"> 
</ext:Button> 