FineUI小技巧（3）表格導出與文件下載（另附24張專業版高清大圖）

時間 2019-11-07

標籤 fineui 技巧表格導出文件下載另附專業高清简体版

原文原文鏈接

需求描述

實際應用中，咱們可能須要導出表格內容，或者在頁面回發時根據用戶權限下載文件（注意，這裏的導出與下載，都是在後臺進行的，和普通的一個連接下載文件不一樣）。 app

點擊按鈕導出表格

因爲FineUI 默認支持AJAX，而導出與下載實際上是一種破壞AJAX的操做，由於通常的導出代碼以下所示： ui

Response.ClearContent();
Response.AddHeader("content-disposition", "attachment; filename=下載的文件.txt");
Response.ContentType = "text/plain";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.Write("下載的文件內容");
Response.End();

這裏直接對Response對象進行操做，因此在導出和下載時要禁用AJAX。 spa

好比經過按鈕導出表格內容，咱們來看下導出按鈕的標籤訂義： excel

<f:Button ID="Button1" EnableAjax="false" DisableControlBeforePostBack="false"
runat="server" Text="導出爲Excel文件" OnClick="Button1_Click">
</f:Button>

這裏兩個參數要注意： code

EnableAjax：代表本次導出操做非AJAX，也就是說點擊此按鈕時頁面會刷新，可是頁面上其餘的操做任然是AJAX的。 orm
DisableControlBeforePostBack：這個參數默認是true，就是在AJAX操做以前禁用按鈕，防止用戶操做過快屢次點擊。這裏非AJAX操做，天然要禁掉。 server

至於，表格的標籤以及導出的代碼，不是這篇文章的重點，就再也不羅列，須要的網友可自行下載源代碼。對象

運行頁面截圖
繼承
下載的文件
事件

選擇須要導出的列

有時咱們僅僅須要導出表格中須要的列，最終實現效果以下所示：

在彈出窗口中選擇須要導出的列
點擊"導出"按鈕產生的文件

這裏咱們的關注點不是如何導出選中的列，而是在那個後臺消息處理中作這個導出？

實際上，當咱們點擊彈出窗體的"導出" 按鈕時，事件處理是在Window的OnClose事件中進行的，以下所示：

protected void Window1_Close(object sender, FineUI.WindowCloseEventArgs e)
{
    Response.ClearContent();
    Response.AddHeader("content-disposition", "attachment; filename=MyExcelFile.xls");
    Response.ContentType = "application/excel";
    Response.ContentEncoding = System.Text.Encoding.UTF8;
    Response.Write(GetGridTableHtml(Grid1, e.CloseArgument.Split('#')));
    Response.End();
}

一樣，因爲這個過程直接操做了Response對象，會破壞FineUI默認的AJAX過程，因此關鍵點是要設置Window的EnableAjax=false，以下所示：

<f:Window ID="Window1" Title="選擇須要導出的列" Hidden="true" EnableIFrame="true"
     EnableMaximize="true" Target="Top" EnableResize="true" runat="server" OnClose="Window1_Close"
     IsModal="true" Width="450px" Height="250px" EnableAjax="false">
 </f:Window>

表格行內文件下載（LineButtonField）

先來看下最終實現的效果：

注意，在這個界面中，不一樣按鈕是否禁用AJAX不一樣：

"選中了哪些行"：啓用AJAX
"按鈕"列：啓用AJAX
"下載"列：禁用AJAX

若是是僅僅設置表格的 EnableAjax=false，雖然可能正常完成"下載"列的功能，可是"按鈕"列也會致使頁面刷新，這就不對。

解決辦法也很簡單，讓表格繼承PageManager或者Web.config的默認設置（EnableAjax=true），而後設置"下載"列的EnableAjax=false，以下所示：

<f:LinkButtonField HeaderText="&nbsp;" Width="80px" CommandName="Action1" Text="按鈕" />
<f:LinkButtonField HeaderText="&nbsp;" EnableAjax="false" Width="80px" CommandName="Action2" Text="下載" />

再來看下後臺的事件處理：

protected void Grid1_RowCommand(object sender, FineUI.GridCommandEventArgs e)
{
    object[] keys = Grid1.DataKeys[e.RowIndex];
    string result = String.Format("你點擊了第 {0} 行，第 {1} 列，行命令是 {2}", e.RowIndex + 1, e.ColumnIndex + 1, e.CommandName) +
               "<br>" +
               String.Format("當前行數據 - 編號：{0}，姓名：{1}", keys[0], keys[1]);

    if (e.CommandName == "Action1")
    {
        // AJAX回發
        labResult.Text = result;
    }
    else if (e.CommandName == "Action2")
    {
        result = result.Replace("<br>", "\r\n");

        // 非AJAX回發
        Response.ClearContent();
        Response.AddHeader("content-disposition", "attachment; filename=row_" + e.RowIndex + ".txt");
        Response.ContentType = "text/plain";
        Response.ContentEncoding = System.Text.Encoding.UTF8;
        Response.Write(result);
        Response.End();
    }
}