本文章来源一个大哥,美美的后台下载不用,非得搞前台下载,最后这件事情就弄到了我的身上。
一. 本方法是Ajax调用的type是下载文件不同,data是下载路径(目前支持IE与谷歌别的浏览器没有试过)
//服务器地址
data= context.Request.Url.Scheme + "://" + context.Request.Url.Authority + "/Temp/" + filePath.Substring(filePath.LastIndexOf(‘\\‘) + 1);
function HttpRequest(type, data) { var xhr = new XMLHttpRequest(); xhr.open("get", data, true); xhr.responseType = "blob"; xhr.onload = function () { // 请求完成 //将文件对象交给回掉函数 var blob = this.response || this.responseText; if (blob.size == 0) { return; } var a = document.createElement(‘a‘); var filename = ""; if (type == 1) { filename = "XXX.pdf"; } else { filename = "XXX.docx"; }
//IE浏览器专用 else 其他浏览器 if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, filename); } else { var url = window.webkitURL.createObjectURL(blob); a.href = url; a.download = filename; a.click(); window.webkitURL.revokeObjectURL(url); } }; xhr.send(); }
二. 下载中添加了一个简单的遮罩层
//关闭等待窗口
function closeWaiting() {
var bgDiv = document.getElementById("bgDiv");
var msgDiv = document.getElementById("msgDiv");
//移除背景遮罩层div
if (bgDiv != null) {
document.body.removeChild(bgDiv);
}
//移除中间信息提示层div
if (msgDiv != null) {
document.body.removeChild(msgDiv);
}
}
//显示等待窗口
function showWaiting() {
var msgw, msgh, bordercolor;
msgw = 500; //提示窗口的宽度
msgh = 300; //提示窗口的高度
bordercolor = "#336699"; //提示窗口的边框颜色
titlecolor = "#99CCFF"; //提示窗口的标题颜色
var sWidth, sHeight;
sWidth = $(document).width();
sHeight = $(document).height();
//背景遮罩层div
var bgObj = document.createElement("div");
bgObj.setAttribute(‘id‘, ‘bgDiv‘);
bgObj.style.position = "absolute";
bgObj.style.top = "0px";
bgObj.style.background = "#888";
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style = 3, opacity = 25, finishOpacity = 75";
bgObj.style.opacity = "0.5";
bgObj.style.left = "0px";
bgObj.style.width = sWidth + "px";
bgObj.style.height = sHeight + "px";
document.body.appendChild(bgObj);
//信息提示层div
var msgObj = document.createElement("div");
msgObj.setAttribute("id", "msgDiv");
msgObj.setAttribute("align", "center");
msgObj.style.position = "absolute";
msgObj.style.background = "white";
msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif Chroma(Color=#FFFFFF)";
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.top = (sHeight - msgh) / 2 + "px";
msgObj.style.left = (sWidth - msgw) / 2 + "px";
document.body.appendChild(msgObj);
//标题栏
var title = document.createElement("h4");
title.setAttribute("id", "msgTitle");
title.setAttribute("align", "left");
title.style.margin = "0px";
title.style.padding = "3px";
title.style.background = bordercolor;
title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX = 20, startY = 20, finishX = 100, finishY = 100, style = 1, opacity = 75, finishOpacity = 100); ";
title.style.opacity = "0.75";
title.style.border = "1px solid " + bordercolor;
title.style.height = "20px";
title.style.font = "14px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color = "white";
title.innerHTML = "下载中,请稍候......";
document.getElementById("msgDiv").appendChild(title);
//中间等待图标
var img = document.createElement("img");
img.style.margin = "90px 0px 10px 0px";
img.style.width = "100px";
img.style.height = "100px";
img.setAttribute("src", "../Images/waiting.gif");
document.getElementById("msgDiv").appendChild(img);
}
三. 遮罩层等待图片

原文:https://www.cnblogs.com/i-cheng/p/13268448.html