背景:每次我们导出excel的时候 ,如果数据量很大,导出花费的时间会很长,页面却有没任何反应,这个时候用户会认为系统有问题,要么关了页面;要么狂点导出,导致系统卡死。
我使用XMLHttpRequest来进行导出下载
/**
2 * 导出文件方法
3 * @param {url} 导出方法路径
4 * @param {data} 传输参数(Json类型)
5 * @param {loadSuccess} 调用成功回调方法
6 * @param {timeout} 请求过期时间(毫秒级 1000毫秒=1秒)
7 **/
function ExportFile(url, data, loadSuccess, timeout) {
$.messager.progress({
msg:'正在导出处理,请耐心等待...'
});//loading效果
var xmlResquest = new XMLHttpRequest();
xmlResquest.open("POST", url, true);
xmlResquest.setRequestHeader("Content-type", "application/json");
xmlResquest.timeout = timeout || (1000 * 60);// 超时时间,单位是毫秒
xmlResquest.responseType = "blob";//该属性必须设置
xmlResquest.onload = function (oEvent) {
$.messager.progress('close');//关闭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) {
$.messager.progress('close');
$.messager.error("导出超时,请重新导出!");
};
xmlResquest.onerror = function (e) {
$.messager.progress('close');
$.messager.error("导出时出现错误,导出失败,请联系相关技术人员!");
};
xmlResquest.send(JSON.stringify(data));//发送请求
}