Example of using Excel file generated by Ajax and downloaded

I haven’t written an article for a long time. Today I will share a method on how to use Ajax to download and generate files in ASP.NET MVC. The following is just my personal experience:

Everyone should know that in ASP.NET MVC, after calling through Ajax When using a controller, you can return a JSON object, but you cannot directly return a file (unless you refresh the page, then it is not Ajax), so if you want to use Ajax to generate a file and download it, you only need to save the generated file to the server first. , and then return the file path through JSON before downloading. Of course, since it is temporarily stored, the corresponding file needs to be deleted immediately after downloading.

The following is an example of how to dynamically generate Excel (I have omitted the specific steps to generate Excel, this is not the focus of this article):

1. First create an Action to generate an Excel file

[HttpPost]
public JsonResult ExportExcel()
{
  DataTable dt = DataService.GetData();
  var fileName = "Excel_" + DateTime.Now.ToString("yyyyMMddHHmm") + ".xls";
  //將生成的文件保存到服務器的臨時目錄里
  string fullPath = Path.Combine(Server.MapPath("~/temp"), fileName);
  
  using (var exportData = new MemoryStream())
  {
    //如何生成Excel這里就不詳細說明啦，我這里對Excel的操作使用的是 NPOI
    Utility.WriteDataTableToExcel(dt, ".xls", exportData);
  
    FileStream file = new FileStream(fullPath, FileMode.Create, FileAccess.Write);
    exportData.WriteTo(file);
    file.Close();
  }
  
  var errorMessage = "you can return the errors in here!";
  
  //返回生成的文件名
  return Json(new { fileName = fileName, errorMessage = "" });
}

2 . Create an Action for downloading

[HttpGet]
[DeleteFileAttribute] //Action Filter, 下載完后自動刪除文件，這個屬性稍後解釋
public ActionResult Download(string file)
{
  //到服務器臨時文件目錄下載相應的文件
  string fullPath = Path.Combine(Server.MapPath("~/temp"), file);
  //返回文件對象，這里用的是Excel，所以文件頭使用了 "application/vnd.ms-excel"
  return File(fullPath, "application/vnd.ms-excel", file);
}

3. Since you want to automatically delete the file after downloading, create an Action Filter

public class DeleteFileAttribute : ActionFilterAttribute
{
  public override void OnResultExecuted(ResultExecutedContext filterContext)
  {
    filterContext.HttpContext.Response.Flush();
    //將當前filter context轉換成具體操作的文件并獲取文件路徑
    string filePath = (filterContext.Result as FilePathResult).FileName;
    //有文件路徑后就可以直接刪除相關文件了
    System.IO.File.Delete(filePath);
  }
}

4. Finally, add the Ajax call code in the foreground:

//這里我使用了 blockUI 做loading...
$.blockUI({ message: &#39;<h3 id="Please-nbsp-wait-nbsp-a-nbsp-moment">Please wait a moment...</h3>&#39; }); 
$.ajax({
  type: "POST",
  url: &#39;@Url.Action("ExportExcel","YourController")&#39;, //調用相應的controller/action
  contentType: "application/json; charset=utf-8",
  dataType: "json",
}).done(function (data) {
  //console.log(data.result);
  $.unblockUI();
  //接收返回的文件路徑，此文件這時已保存到服務器上了
  if (data.fileName != "") {
    //通過調用 window.location.href 直接跳轉到下載 action 進行文件下載操作
    window.location.href = "@Url.RouteUrl(new { Controller = "YourController", Action = "Download"})/?file=" + data.fileName;
  }
});

5. Finished!