js用blob處理ajax請求的流文件

時間 2019-11-21

原文原文鏈接

項目框架MVC,語言C#json

原本咱們項目的導出都是在js中window.location.href="導出文件地址"，後臺大都是定義一個void方法，將文件流寫入Response而後交給瀏覽器處理，若是後臺出現錯誤的話就只能重定向到error頁面，而後如今出現新的需求：1.須要在文件導出提示框出現以前添加loading效果，不容許繼續操做； 2.若是導出失敗或者成功要有提示信息；瀏覽器

廢話很少說，翠花上Codeapp

老代碼：框架

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         }

後臺代碼

新代碼：ide

 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         }