由于系统中要下载一张巨大的表包含系统所有的信息,导致SQL运行较慢,从而使前端会无响应四五秒钟,数据在后台执行,但是使用from下载文件时,前端无法获取到下载完成的返回值,导致没办法对界面进行有效修改。
解决如下:
1、最初写下载时候是用的jQuery的Ajax方法进行下载,使用后会发现,jQuery的Ajax的返回类型不包含文件类型,下载不下来,下载无效
2、后来修改成最初始的请求,使用window.location.href=“URL”,虽然可以下载成功,但是同样会存在无返回值情况,而且只能是get方法,如果传的参数过多过长就会出错,放弃这种方法
3、接着选择通过form下载,代码
var url = "/../DownLoad";
var $form = $(document.createElement('form')).css({ 'display': 'none' }).attr("method", "POST").attr("action", url);
var $input = $(document.createElement('input')).attr('type', 'hidden').attr('name', 'wafername').val($("#txt_wfname").val());
var $input0 = $(document.createElement('input')).attr('type', 'hidden').attr('name', 'pdname').val($("#txt_pdname").val());
var $input1 = $(document.createElement('input')).attr('type', 'hidden').attr('name', 'organizeid').val(top.clients.curorganize[0]);
$form.append($input);
$form.append($input0);
$form.append($input1);
//$.loading(true, "正在下载,请稍后。。");//没有成功回调函数,导致文件下载完成了,此UI依然无法关闭
$("body").append($form);
$form.submit();
此方法查了很多资料,都没找到合适的方法可以有成功回调方法。有解决办法的大佬可以给指点一下
4、最后我只好自己用初始的XMLHttpRequest,来写请求函数下载,完美解决成功下载后关闭“正在等待UI”
$.loading(true, "正在下载,请稍后。。");//加载UI
var form = new FormData();
form.append('wafername', $("#txt_wfname").val());
form.append('pdname', $("#txt_pdname").val());
var xhr = new XMLHttpRequest();
xhr.open('POST', 'URL', true);
xhr.responseType = 'blob';//返回类型为blob
xhr.send(form);
xhr.onload = function (e) {
if (this.status == 200) {//请求成功执行
var blob = new Blob([this.response], {
type: "application/vnd.ms-excel"
});
// 创建a链接 href链接地址 download为下载下来后文件的名称
var today = new Date();
var y = today.getFullYear();
var m = today.getMonth() + 1;
var d = today.getDate();
var h = today.getHours();
var mm = today.getMinutes();
var s = today.getSeconds();
m = m < 10 ? "0" + m : m;
d = d < 10 ? "0" + d : d;
h = h < 10 ? "0" + h : h;
mm = mm < 10 ? "0" + mm : mm;
s = s < 10 ? "0" + s : s;
var date = y + "-" + m + "-" + d + "-" + h + "-" + mm + "-" + s;
var aa = document.createElement('a');
aa.href = URL.createObjectURL(blob);
aa.innerHTML = 'a链接';
aa.download = "产品运行表(" + date + ").xls";
aa.style.display = 'none'; //隐藏a标签 直接调用a标签的点击事件
document.body.appendChild(aa);
aa.click();
$.loading(false);//关闭UI
}
};