背景
开发项目中导出功能，因为数据量有点大，所以导出可能需要时间有点长，所以想用ajax异步请求。
存在问题
利用传统的js和jquery提供的ajax相关获取响应的方式是无法实现excel文件下载的。
js的XMLHttpRequest对象提供了responseText和responseXML两个属性，获取的是html和xml文件格式，没有提供二进制流获取的方式。参考
jquery提供了$.ajax()方法中返回的响应结果类型包括xml，html，script，json，jsonp，text，其中也没有二进制流文件格式。参考
解决办法
原生开发
当原生开发的时候，就要依靠操作XMLHttpRequest对象来获取响应的二进制流。经过百度我发现虽然这个对象没有提供直接获取流的属性，但是它的文档中responseType是可以返回一个Blob对象的。而Blob对象就是一个二进制数据的对象，只要我们获取到这个对象，就可以通过浏览器获取到需要的excel文件。
代码：
$('.exportBtn').bind("click", function () {
var method = 'post';//请求方法
var url = 'http://localhost.....';//请求url
var xhr = new XMLHttpRequest();//定义一个XMLHttpRequest对象
xhr.open(method, url, true);
xhr.responseType = 'blob';//设置ajax的响应类型为blob
xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
xhr.onload = function ()//当请求完成，响应就绪进入
{
if (this.status == 200)//当响应状态码为200时进入
{
var blob = this.response;//获取响应返回的blob对象
//这一段用来判断是否是IE浏览器，因为下面有些代码不支持IE
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, "NPI_PROJECT.xlsx");
return;
}
var a = document.createElement('a');//在dom树上创建一个a标签
var url = window.URL.createObjectURL(blob);//我的理解是生成一个相对于浏览器的虚拟url，用于指向传入的blob对象，让浏览器可以通过这个url找到这个blob对象
a.href = url;//将url赋值给a标签的href属性
a.download = 'NPI_PROJECT.xlsx';//设置设置下载文件的名称
a.click();//主动触发a标签点击事件
}
};
xhr.send(JSON.stringify({
name: '',
status: ''
}));//附带参数发送请求
});
jquery插件开发 -->jquery.fileDownload
用这个插件是最简单的
$('.exportBtn').bind("click", function () {
var httpMethod = 'post';
var url = "http://localhost.....";
var params = {
name: '',
status: ''
};
$.fileDownload(url, {
httpMethod: httpMethod,
// 因为这个插件貌似只支持URL参数,所以要用jquery param将js对象转成URL参数
data: $.param(params),
prepareCallback: function (url) {
console.log("正在导出...");
},
//要想成功回调失败和成功方法，要在响应首部加 response.setHeader("Set-Cookie", "fileDownload=true; path=/");
successCallback: function (url) {
console.log("导出成功");
},
failCallback: function (html, url) {
console.log("导出失败");
}
})
tips：
1.如果成功失败回调函数没有生效，一定要确认响应首部是否添加成功。因为我遇到一个情况，我先写响应流，然后添加首部发现没有添加成功。
2.fileDownload的data参数貌似只支持URL格式参数（如name=1&age=12）,我尝试传json和js对象都没有成功。而且控制器不要使用@Requestbody接受参数，因为这个注解只接受请求体中的JSON格式参数。
参考