[原創]FineUI秘密花園（二十二） — 表格之導出Excel文件

將表格內容導出為Excel文件是實際項目中的常見需求，怎么來實現呢？

 

導出文件的格式

首先我們需要理解的一點是，導出的文件其實一個HTML片段，只不過Excel會按照自身的格式自動格式化而已。

來看一個導出文件的典型示例：

<table border="1">
 <tr><th>姓名</th><th>性別</th></tr>
 <tr><th>張三</th><th>男</th></tr>
 <tr><th>李四</th><th>男</th></tr>
 <tr><th>春花</th><th>女</th></tr>
</table>

將此文件后綴改成xls，並用Excel打開后可見：

 

 

將GridView導出為Excel文件

首先來看下如何將Asp.Net的GridView導出為Excel文件，網上已經有很好的參考資料，這是博客園中的中文譯本。

概括說來有如下幾個技巧：

1. 必須重載VerifyRenderingInServerForm函數，函數體留空，否則會報錯；
2. 如果GridView中包含CheckBox，LinkButton等控件或者分頁時，需要設置頁面屬性EnableEventValidation="false"，否則會報錯；
3. 可以在導出數據之前將GridView中的CheckBox等控件用Literal控件代替。

 

下面來看一個示例，示例的ASPX標簽結構如下：

<asp:GridView ID="GridView1" Width="900px" DataKeyNames="Id,Name" AutoGenerateColumns="False"
    runat="server">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Name" HeaderText="姓名" />
        <asp:TemplateField HeaderText="性別">
            <ItemTemplate>
                <asp:Label ID="Label2" runat="server" Text='<%# GetGender(Eval("Gender")) %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="EntranceYear" HeaderText="入學年份" />
        <asp:CheckBoxField DataField="AtSchool" HeaderText="是否在校" />
        <asp:HyperLinkField HeaderText="所學專業" DataTextField="Major" DataTextFormatString="{0}"
            DataNavigateUrlFields="Major" DataNavigateUrlFormatString="http://gsa.ustc.edu.cn/search?q={0}"
            Target="_blank" />
        <asp:ImageField DataImageUrlField="Group" DataImageUrlFormatString="~/images/16/{0}.png"
            HeaderText="分組">
        </asp:ImageField>
    </Columns>
</asp:GridView>

表格初始化代碼省略，我們來看下和導出相關的代碼：

public override void VerifyRenderingInServerForm(Control control)
{

}

protected void Button2_Click(object sender, EventArgs e)
{
    // ResolveGridView(GridView1);

    Response.ClearContent();
    Response.AddHeader("content-disposition", "attachment; filename=MyExcelFile.xls");
    Response.ContentType = "application/excel";

    StringWriter sw = new StringWriter();
    HtmlTextWriter htw = new HtmlTextWriter(sw);
    GridView1.RenderControl(htw);

    Response.Write(sw.ToString());
    Response.End();
}

這里做了如下幾件事情：

1. 在ASPX標簽中設置頁面的EnableEventValidation屬性為false；
2. 重載VerifyRenderingInServerForm函數並留空；
3. 在導出Excel的按鈕事件中，首先設置響應頭content-disposition，這樣瀏覽器才會將此響應作為文件下載；
4. 將GridView控件重新渲染到HtmlTextWriter流中；
5. 讀出HtmlTextWriter流的內容，並作為響應體的正文。

 

我們來看下頁面的UI顯示和導出的Excel的內容：

 

 

優化GridView導出的Excel文件

在上面導出的Excel表格中，有兩個地方需要進一步優化：

1. “是否在校”列不應該使用復選框，而應該是靜態文本；
2. “分組”列的圖片沒有顯示出來，因為表格中的圖片路徑是相對路徑，這里需要轉換為絕對路徑。

 

實現起來也很簡單，只需要遍歷GridView實例，修改其中的復選框控件和圖片控件即可，如下所示：

private void ResolveGridView(Control ctrl)
{
    for (int i = 0; i < ctrl.Controls.Count; i++)
    {
        // 圖片的完整URL
        if (ctrl.Controls[i].GetType() == typeof(AspNet.Image))
        {
            AspNet.Image img = ctrl.Controls[i] as AspNet.Image;
            img.ImageUrl = Request.Url.AbsoluteUri.Replace(Request.Url.AbsolutePath, Page.ResolveUrl(img.ImageUrl));
        }

        // 將CheckBox控件轉化為靜態文本
        if (ctrl.Controls[i].GetType() == typeof(AspNet.CheckBox))
        {
            Literal lit = new Literal();
            lit.Text = (ctrl.Controls[i] as AspNet.CheckBox).Checked ? "√" : "×";
            ctrl.Controls.RemoveAt(i);
            ctrl.Controls.AddAt(i, lit);
        }

        if (ctrl.Controls[i].HasControls())
        {
            ResolveGridView(ctrl.Controls[i]);
        }
    }
}

最終的結果：

 

 

將Grid導出為Excel文件

前面介紹了如何將Asp.Net的GridView控件導出為Excel，簡單來說就是將GridView重新渲染到HtmlTextWriter流中，然后將流內容輸入為響應正文。

那么我們是否也可以照葫蘆畫瓢來實現將Grid導出為Excel文件呢？

下面就來試一試，首先來看ASPX標簽結構：

<ext:Grid ID="Grid1" Title="表格" ShowBorder="true" ShowHeader="true" Width="900px"
    AutoHeight="true" runat="server" DataKeyNames="Id,Name">
    <Columns>
        <ext:TemplateField Width="60px">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label>
            </ItemTemplate>
        </ext:TemplateField>
        <ext:BoundField Width="100px" DataField="Name" DataFormatString="{0}" HeaderText="姓名" />
        <ext:TemplateField Width="60px" HeaderText="性別">
            <ItemTemplate>
                <asp:Label ID="Label3" runat="server" Text='<%# GetGender(Eval("Gender")) %>'></asp:Label>
            </ItemTemplate>
        </ext:TemplateField>
        <ext:BoundField Width="60px" DataField="EntranceYear" HeaderText="入學年份" />
        <ext:CheckBoxField Width="60px" RenderAsStaticField="true" DataField="AtSchool" HeaderText="是否在校" />
        <ext:HyperLinkField HeaderText="所學專業" DataToolTipField="Major" DataTextField="Major"
            DataTextFormatString="{0}" DataNavigateUrlFields="Major" DataNavigateUrlFormatString="http://gsa.ustc.edu.cn/search?q={0}"
            DataNavigateUrlFieldsEncode="true" Target="_blank" ExpandUnusedSpace="True" />
        <ext:ImageField Width="60px" DataImageUrlField="Group" DataImageUrlFormatString="~/images/16/{0}.png"
            HeaderText="分組"></ext:ImageField>
        <ext:BoundField Width="100px" DataField="LogTime" DataFormatString="{0:yy-MM-dd}"
            HeaderText="注冊日期" />
    </Columns>
</ext:Grid>
<ext:Button ID="Button1" EnableAjax="false" DisableControlBeforePostBack="false"
    runat="server" Text="將Grid導出為Excel文件" OnClick="Button1_Click">
</ext:Button>

請注意這里ext:Button的屬性：

1. EnableAjax=false，由於在按鈕的點擊事件中手工修改了響應頭和響應正文，就不能使用FineUI默認的Ajax回發；
2. DisableControlBeforePostBack=false，這個屬性本來是讓按鈕在點擊后立即變灰，然后在Ajax響應后再次啟用，放置多次點擊，這里就不需要了。

 

來看下后台按鈕事件處理函數：

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();
}

 

點擊導出按鈕，用記事本打開生成的Excel文件：

<div id="Grid1_wrapper">
    <div id="Grid1_tpls" class="x-grid-tpls x-hide-display">
        <div class="x-grid-tpl" id="Grid1_c0r0">
            <span id="Grid1_c0r0_Label1">1</span>
        </div>
        <div class="x-grid-tpl" id="Grid1_c2r0">
            <span id="Grid1_c2r0_Label3">女</span>
        </div>
        <div class="x-grid-tpl" id="Grid1_c0r1">
            <span id="Grid1_c0r1_Label1">2</span>
        </div>
        // 省略類似的部分...
    </div>
</div>

結果只看到一些DIV，而非Table結構。仔細觀察這些DIV，你會發現它們是模板列渲染后的值，其他列的值哪去了？

 

如果你理解extjs的工作原理，這個結果並不奇怪。

Grid渲染到頁面中的只有一些簡單的DIV標簽，至於內部的內容則是通過JavaScript來生成的，這個JavaScript就隱藏在頁面的底部，如果你觀察生成的頁面源代碼的話，就能看到類似的代碼：

 

 

而這些Values值正是渲染后的HTML片段，並且我們可以通過行GridRow的Values屬性拿到這些值！

如此一來就好辦了，拿到這些值后手工拼裝成一個表格不就可以了，最終的代碼如下所示：

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();
            // 處理CheckBox
            if (html.Contains("box-grid-static-checkbox"))
            {
                if (html.Contains("box-grid-static-checkbox-uncheck"))
                {
                    html = "×";
                }
                else
                {
                    html = "√";
                }
            }

            // 處理圖片
            if (html.Contains("<img"))
            {
                string prefix = Request.Url.AbsoluteUri.Replace(Request.Url.AbsolutePath, "");
                html = html.Replace("src=\"", "src=\"" + prefix);
            }

            sb.AppendFormat("<td>{0}</td>", html);
        }
        sb.Append("</tr>");
    }

    sb.Append("</table>");

    return sb.ToString();
}

正如你看到的，這里面也對復選框和圖片進行了處理：

1. 因為FineUI最終將復選框渲染成類似 <div class="box-grid-static-checkbox"></div>的標簽，所以我們要將其替換成靜態文本；
2. 對圖片的處理則是在圖片路徑前面加載前綴，以生成圖片的絕對路徑。

 

來看最終的效果：

 

 

小結

將表格內容導出為Excel文件在實際項目中經常會遇到，本篇文章從導出Asp.Net的GridView開始，循序漸進地講解如何導出FineUI的Grid控件，最終得到我們滿意的結果。

下一篇文章我們會開始新的征程，接着講解樹控件、選項卡控件、手風琴控件以及窗體控件。

 

注：《FineUI秘密花園》系列文章由三生石上原創，博客園首發，轉載請注明出處。文章目錄 官方論壇