近期在工作中遇到一个问题,导出增加进度条,可以说是一个原本非常简单的事情,但要求必须进度条消失文件下载的弹框就要出现,也就是说完全同步,试了好多种方法才发现用下面的方式才行。
干货分析
js代码`
导出的请求方法 ExportDownloadTimer 是前后端监听是否导出完成的对象
var params = {};//参数需要往后台传递的参数信息
$.ajax({
type: "POST",
url: url,//导出的触发文件路径
data: params,//绑定参数
success: function (response, status, request) {
params.DownParams = DownParams;//下载的参数在这个参数主要在后端中记录cookie信息
var disp = request.getResponseHeader('Content-Disposition');
if (disp && disp.search('attachment') != -1) { //判断是否为文件
var form = $('<form method="POST" action="' + url + '">');
$.each(params, function (k, v) {
form.append($('<input type="hidden" name="' + k +
'" value="' + v + '">'));
});
$('body').append(form);
form.submit(); //自动提交
ExportDownloadTimer.Count = 0;
ExportDownloadTimer.MaxCount = 7200;
ExportDownloadTimer.KeyId = DownParams.split('|')[0];
ExportDownloadTimer.KeyValue = DownParams.split('|')[1];
ExportDownloadTimer.Cache = setInterval(ExportDownloadTimer.CheckToken, 500);
}
}
});
js代码
ExportDownloadTimer方法
其中的Count和MaxCount是解决无限期的循环,可以给整个进程等待限定一个最大值
var ExportDownloadTimer = {
Cache: null,//记录缓存方式
Count: 0,//走到的位置 当前允许的次数
MaxCount: 0,//最大执行次数
KeyId: "",//监听的名称
KeyValue: "",//监听对比值
CheckToken: function () {
//前端实时监测时间戳和后台设置的cookie值是否相等,相等就说明文件下载成功,就可以关闭提示框
var token = ExportDownloadTimer.GetCookie(ExportDownloadTimer.KeyId);
ExportDownloadTimer.Count++;
if ((token && token == ExportDownloadTimer.KeyValue) ||
ExportDownloadTimer.MaxCount < ExportDownloadTimer.Count) {
clearTimeout(ExportDownloadTimer.Cache);
ExportDownloadTimer.Cache = null,
ExportDownloadTimer.Count = 0;
ExportDownloadTimer.MaxCount = 0;
ExportDownloadTimer.KeyId = "";
ExportDownloadTimer.KeyValue = "";
//这个地方记录进度条关闭方法
}
},
//导出所用的方式处理
GetCookie: function (cookieName) {
var strCookie = document.cookie;
var arrCookie = strCookie.split("; ");
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if (cookieName == arr[0]) {
return arr[1];
}
}
return "";
}
}
C#代码
监听信息 DownParams 是前端传递过的参数,必须和前端信息保持一致来实现监听效果
if (!string.IsNullOrEmpty(DownParams) && DownParams.Split('|').Length == 2 && !string.IsNullOrEmpty(DownParams.Split('|')[0]) && !string.IsNullOrEmpty(DownParams.Split('|')[1]))
{
HttpRequest request = HttpContext.Current.Request;
HttpResponse response = HttpContext.Current.Response;
if (request != null && request.Cookies[DownParams.Split('|')[0]] != null)//先删除
{
response.Cookies.Remove(DownParams.Split('|')[0]);
}
Guard.IsNotNullOrEmpty(DownParams.Split('|')[0], "cookieName");
HttpCookie cookie = new HttpCookie(DownParams.Split('|')[0]);
cookie.Expires = DateTime.Now.AddMinutes(10);
cookie.Value = DownParams.Split('|')[1];
cookie.Path = "/"; //指定统一的Path,比便能通存通取 //设置跨域,这样在其它二级域名下就都可以访问到了
response.AppendCookie(cookie);
}