使用者匯出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);
}
});
});
以上
