ASP.NET MVC 使用BlockUI 遮罩產生並下載Excel文件

使用者匯出Excel檔的時候，因爲產生檔案的過程需耗時較久，

所以要使用一個遮罩先蓋住畫面，讓使用者知道目前有在作業且無法點選其他按鈕，

待下載完成後再移除遮罩。

作法概述:

產生Excel的時間較久，所以我把產生Excel跟下載Excel這兩個動作分開來處理，

先用ajax呼叫後端產生Excel檔案，並且把檔名回傳到前端，呼叫ajax之前先以遮罩蓋住頁面，

前端確認檔名正確(代表檔案有正常產生)，把遮罩關掉，

之後再以window.open的方式去開啓另外一個下載頁面來下載資料。

遮罩元件:jQuery BlockUI ，用法可參考官網。

要注意的是這個套件要跟ajax合併使用的時候有三點要注意

1.匯入從官網下載的JS檔

<script type="text/javascript" src="~/Scripts/jquery.blockUI.js"></script>

2.在網頁初始化的時候在JS就要註冊呼叫ajax時啓動遮罩，ajax結束時關閉遮罩。

$(function(){

   // 註冊 ajax 開始的時候就使用遮罩蓋住頁面，ajax 結束的時候就結束遮罩
    $(document).ajaxStart(function () {
        $.blockUI({
            message: '<h1>請稍後...</h1>'
        });
    }).ajaxStop($.unblockUI);

});

3.使用ajax的時候，async需設定爲false。

後端實作

在Controller建立兩個Action ， 一個是CreateExcelFile ，一個是DownloadExcel。

CreateExcelFile:

[HttpPost]
public ActionResult CreateExcelFile()
{
  // 要回傳的物件，ReturnCode是狀態碼，000表示執行成功，999表示執行失敗 
  ResultObject _result = new ResultObject();
  _result.ReturnCode = "000";

  var objExcel_App = new XLWorkbook();

  //匯出檔案名稱
  String FileName = "ExcelFile" + DateTime.Now.ToString("yyyyMMddHHmmss") + ".xlsx";

  String FilePath = "D:\\";

  // 產生Excle的邏輯

  //將Excelt產生到D槽底下(可自行更換)
  objExcel_App.SaveAs(FilePath + FileName);

  // ReturnMessage 存檔名 
  _result.ReturnMessage = FileName;

  return Json(_result);

}

DownloadExcel:

public ActionResult DownITBladeExcelFile(String FileName)
{
   String FilePath = "D:\\";
   return File(FilePath + FileName, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", FileName);
}

前端呼叫

// 匯出Excel 
    $('#btnExport').on('click', function () {

        // 先以ajax 呼叫後端產生Excel 的實體檔案(浪費時間住要是在這一段)
        $.ajax({
            type: "POST",
            url: '../Controller名稱/CreateExcelFile',
            data: '',
            async: true, // 記得要設為true
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (_result) {                
                if(_result.ReturnCode == '000' && _result.ReturnMessage != '' && _result.ReturnMessage != undefined)
                {
                    // 成功產生檔案之後再去下載已經產生好在Server端的Excel檔
                    window.open("../Controller名稱/DownloadExcelFile?FileName=" + _result.ReturnMessage, "_blank ", 'ITBlade', config = 'width=800,height=380,scrollbars=yes,resizable=yes,toolbar=yes');
                }
                else {
                    alert(_result.ReturnMessage);
                }

            },
            error: function (error) {
                alert('Error: ' + error);
            }
        });

    });

以上