ASP.NET MVC 使用BlockUI 遮罩产生并下载Excel文件

最新推荐文章于 2020-03-22 13:29:04 发布

wwwdsbjdqcom

最新推荐文章于 2020-03-22 13:29:04 发布

阅读量582

点赞数

文章标签： .net

本文介绍了如何在ASP.NET MVC中使用BlockUI组件创建遮罩，确保在后台生成Excel文件期间阻止用户交互。通过将生成和下载步骤分开，先用Ajax调用生成文件并返回文件名，然后显示遮罩，确认文件生成后关闭遮罩，最后通过window.open启动下载。在实现过程中，需要注意BlockUI与Ajax的结合使用，包括导入JS文件、初始化时设置遮罩与Ajax同步以及设置Ajax异步为false。

摘要由CSDN通过智能技术生成

使用者汇出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);
            }
        });

    });