前端设置请求头POST方式下载实现

我会带着你远行 2022-09-12 14:52 263阅读 0赞

*  iframe、form表单提交的方法不能设置请求头；
 *  jq的ajax不能处理blob文件，这里用原生XMLHttpRequest，
 *  可以设置请求头参数，post方式，处理blob文件

> 前端代码

/** * 导出文件方法 * @param {url} 导出方法路径 * @param {data} 传输参数（Json类型） * @param {loadSuccess} 调用成功回调方法 * @param {timeout} 请求过期时间（毫秒级 1000毫秒=1秒） **/
     function ExportFile(url, data, loadSuccess, timeout) { 
             // $.msg.loading();//loading效果
             var xmlResquest = new XMLHttpRequest();
             xmlResquest.open("POST", url, true);
             xmlResquest.setRequestHeader("Content-type", "application/json");
    		//xmlResquest.setRequestHeader("token", "xxx");// 设置请求头参数
             xmlResquest.timeout = timeout || (1000 * 60);// 超时时间，单位是毫秒
             xmlResquest.responseType = "blob";//该属性必须设置
             xmlResquest.onload = function (oEvent) { 
                 // $.msg.closeAll('loading');//关闭loading效果
                 var retData = {  Success: true, errorMsg: ["导出成功！"] };
                 var content = xmlResquest.response;
                 var blob = new Blob([content]);
                 if (xmlResquest.getResponseHeader("content-disposition")) { //判断有没有请求头content-disposition，该请求头在后台文件流导出成功时添加
                     var explorer = navigator.userAgent;
                     var elink = document.createElement('a');
                     var fileName = xmlResquest.getResponseHeader("content-disposition").split(";")[1].split("=")[1];//获取文件名
                    //响应头中的内容如果包含中文会出现乱码，需要解码才能正常显示
                     if (explorer.indexOf("MSIE") >= 0 || explorer.indexOf("Chrome") >= 0) {   //IE和google浏览器
                         fileName = decodeURIComponent(fileName);
                     } else { 
                         fileName = decodeURI(escape(fileName));
                     }
                     elink.download = fileName;
                     elink.style.display = 'none';
                     elink.href = window.URL.createObjectURL(blob);
                     document.body.appendChild(elink);
                     elink.click();
                     document.body.removeChild(elink);
                     window.URL.revokeObjectURL(url);
                     if (loadSuccess && $.isFunction(loadSuccess)) loadSuccess(retData, oEvent);
                 } else { //后台出现异常时的处理
                    var r = new FileReader(); 
                     r.readAsText(blob, 'utf-8');
                     r.onload = function (e) { 
                         if (loadSuccess && $.isFunction(loadSuccess)) loadSuccess(JSON.parse(r.result), oEvent);
                     }
                 }
             };
             xmlResquest.ontimeout = function (e) { 
                 // $.msg.closeAll('loading');
                 // $.msg.warning("导出超时，请重新导出！");
             };
             xmlResquest.onerror = function (e) { 
                 // $.msg.closeAll('loading');
                 // $.msg.warning("导出时出现错误，导出失败，请联系相关技术人员！");
             };
             xmlResquest.send(JSON.stringify(data));//发送请求
         }

> 后台代码（参考）

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         }