前面写了一篇文章“jQuery Ajax-$.ajax()方法如何获取Response Headers”，里面文件下载功能的实现，主要用的是ajax()方法请求成功后的回调函数success（获取请求到的数据）以及请求完成后的回调函数complete（实现下载）。对于这种方法，我感觉不太合理，也不推荐。接下来将介绍更好的方法。具体如下：
在该方法中，删除了请求完成后的回调函数complete，直接使用请求成功后的回调函数success来实现下载功能。代码如下：
function download(recordId) {
// ajax支持的服务器返回数据类型有：xml、json、script、html，
// 其他类型(例如二进制流)将被作为String返回，无法触发浏览器的下载处理机制和程序。
$.ajax({
url: "下载URL",
method: "get",
beforeSend: function (request) {
request.setRequestHeader("token", sessionStorage.getItem('token'));
},
data: {//需要发送的数据
recordId: recordId,
},
success: function (result, state, xhr) {//3个参数
//result:请求到的结果数据
//state:请求状态（success）
//xhr:XMLHttpRequest对象
// 从Response Headers中获取fileName
let fileName = xhr.getResponseHeader('Content-Disposition').split(';')[1].split('=')[1].replace(/\"/g, '')
//获取下载文件的类型
let type = xhr.getResponseHeader("content-type")
//结果数据类型处理
let blob = new Blob([result], { type: type })
//对于<a>标签，只有 Firefox 和 Chrome（内核）支持 download 属性
//IE10以上支持blob，但是依然不支持download
if ('download' in document.createElement('a')) {//支持a标签download的浏览器
//通过创建a标签实现
let link = document.createElement("a");
//文件名
link.download = fileName;
link.style.display = "none"
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click();//执行下载
URL.revokeObjectURL(link.href);//释放url
document.body.removeChild(link);//释放标签
} else {//不支持
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, fileName)
}
}
},
})
}
如图所示：
