js用blob处理ajax请求的流文件

项目框架MVC,语言C#

本来我们项目的导出都是在js中window.location.href="导出文件地址"，后台大都是定义一个void方法，将文件流写入Response然后交给浏览器处理，如果后台出现错误的话就只能重定向到error页面，然后现在出现新的需求：1.需要在文件导出提示框出现之前添加loading效果，不允许继续操作； 2.如果导出失败或者成功要有提示信息；  

废话不多说，翠花上Code

老代码：

1 window.location.href='导出请求地址';

 1         public void ExportData(TM_Master_CommoditySM model)
 2         {
 3             string FileName = DateTime.Now.ToString("yyyyMMddHHmmss") + "商品信息导出.xls";
 4             MemoryStream stream = obj.CommodityExport(model);//数据流
 5             byte[] bytes = stream.ToArray();
 6             stream.Close();
 7 
 8             Response.AddHeader("Content-Type", "application/vnd.ms-excel");
 9             //这里判断使用的浏览器是否为Firefox，Firefox导出文件时不需要对文件名显示编码，编码后文件名会乱码
10             //但是IE和Google需要编码才能保持文件名正常
11             if (Request.ServerVariables["http_user_agent"].ToString().IndexOf("Firefox") != -1)
12             {
13                 Response.AddHeader("Content-Disposition", "attachment;filename=" + FileName);
14             }
15             else
16             {
17                 Response.AddHeader("Content-Disposition", "attachment;filename=" + System.Web.HttpUtility.UrlEncode(FileName, System.Text.Encoding.UTF8));
18             }
19             Response.BinaryWrite(bytes);
20             Response.Flush();
21             Response.End();
22         }

后台代码

 

新代码：

 1    /**
 2      * 导出文件方法
 3      * @param {url} 导出方法路径
 4      * @param {data} 传输参数（Json类型）
 5      * @param {loadSuccess} 调用成功回调方法
 6      * @param {timeout} 请求过期时间（毫秒级  1000毫秒=1秒）
 7      **/
 8 function ExportFile(url, data, loadSuccess, timeout) {
 9         $.msg.loading();//loading效果
10         var xmlResquest = new XMLHttpRequest();
11         xmlResquest.open("POST", url, true);
12         xmlResquest.setRequestHeader("Content-type", "application/json");
13         xmlResquest.timeout = timeout || (1000 * 60);// 超时时间，单位是毫秒
14         xmlResquest.responseType = "blob";//该属性必须设置
15         xmlResquest.onload = function (oEvent) {
16             $.msg.closeAll('loading');//关闭loading效果
17             var retData = { Success: true, errorMsg: ["导出成功！"] };
18             var content = xmlResquest.response;
19             var blob = new Blob([content]);
20             if (xmlResquest.getResponseHeader("content-disposition")) {//判断有没有请求头content-disposition，该请求头在后台文件流导出成功时添加
21                 var explorer = navigator.userAgent;
22                 var elink = document.createElement('a');
23                 var fileName = xmlResquest.getResponseHeader("content-disposition").split(";")[1].split("=")[1];//获取文件名
24                //响应头中的内容如果包含中文会出现乱码，需要解码才能正常显示
25                 if (explorer.indexOf("MSIE") >= 0 || explorer.indexOf("Chrome") >= 0) {  //IE和google浏览器
26                     fileName = decodeURIComponent(fileName);
27                 } else {
28                     fileName = decodeURI(escape(fileName));
29                 }
30                 elink.download = fileName;
31                 elink.style.display = 'none';
32                 elink.href = window.URL.createObjectURL(blob);
33                 document.body.appendChild(elink);
34                 elink.click();
35                 document.body.removeChild(elink);
36                 window.URL.revokeObjectURL(url);
37                 if (loadSuccess && $.isFunction(loadSuccess)) loadSuccess(retData, oEvent);
38             } else {//后台出现异常时的处理
39                var r = new FileReader(); 
40                 r.readAsText(blob, 'utf-8');
41                 r.onload = function (e) {
42                     if (loadSuccess && $.isFunction(loadSuccess)) loadSuccess(JSON.parse(r.result), oEvent);
43                 }
44             }
45         };
46         xmlResquest.ontimeout = function (e) {
47             $.msg.closeAll('loading');
48             $.msg.warning("导出超时，请重新导出！");
49         };
50         xmlResquest.onerror = function (e) {
51             $.msg.closeAll('loading');
52             $.msg.warning("导出时出现错误，导出失败，请联系相关技术人员！");
53         };
54         xmlResquest.send(JSON.stringify(data));//发送请求
55     }    

前台方法

 1 public JsonResult ExportData(TM_Master_CommoditySM model)
 2         {
 3             string FileName = DateTime.Now.ToString("yyyyMMddHHmmss") + "商品信息导出.xls";
 4             var stream = obj.CommodityExport(model);
 5             if (stream != null)
 6             {
 7                 byte[] bytes = stream.ToArray();
 8                 stream.Close();
 9                 Response.AddHeader("Content-Type", "application/vnd.ms-excel");
10                 //这里判断使用的浏览器是否为Firefox，Firefox导出文件时不需要对文件名显示编码，编码后文件名会乱码
11                 //但是IE和Google需要编码才能保持文件名正常
12                 if (Request.ServerVariables["http_user_agent"].ToString().IndexOf("Firefox") != -1)
13                 {
14                     Response.AddHeader("Content-Disposition", "attachment;filename=" + FileName);
15                 }
16                 else
17                 {
18                     Response.AddHeader("Content-Disposition", "attachment;filename=" + System.Web.HttpUtility.UrlEncode(FileName, System.Text.Encoding.UTF8));
19                 }
20                 Response.BinaryWrite(bytes);
21                 Response.Flush();
22                 Response.End();
23             }
24             return Json(new RetMsgM {Success=false, errorMsg=new List<string> { "导出失败！"} },JsonRequestBehavior.AllowGet);
25         }

后台代码

转载于:https://www.cnblogs.com/stupid-dong/p/10512445.html