下载文件通常使用同步操作
当在vue + axios环境下,尤其是在vue路由的环境下,怎样实现异步 也能下载后端返回的二进制文件
axios完整代码:
/*下载excel*/
function downExcelAction(url,data) {
return axios({
url: url,
method: 'post',
data: data,
transformRequest: [function(data) {
let ret = ''
for(let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
responseType: 'blob'
}).then(res=>{
var blob = new Blob([res], { type: 'application/vnd.ms-excel application/x-excel;charset=utf-8' });
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob);
downloadElement.href = href;
downloadElement.download = data.bigTile+'.xls';
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(href);
})
}
代码分析:
1、写一个正常的axios的请求,包含请求url,请求excel下载的data参数,但是我们请求的接口,返回的是一个二进制文件,所以还需要做一些修改
function downExcelAction(url,data) {
return axios({
url: url,
method: 'post',
data: data})
}
2、需要修改默认的Content-Type
function downExcelAction(url,data) {
return axios({
url: url,
method: 'post',
data: data
headers: { //需要修改为表单提交的格式,默认为application/json
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
3、请求发送前重新编辑请求数据,使用transformRequest属性,这一块理解的不是很透彻,大概意思是在将请求数据封装成&格式,有懂的老哥可以留言,互相学习
function downExcelAction(url,data) {
return axios({
url: url,
method: 'post',
data: data
headers: { //需要修改为表单提交的格式,默认为application/json
'Content-Type': 'application/x-www-form-urlencoded'
},
transformRequest: [function(data) {
let ret = ''
for(let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
})
}
4、设置返回参数类型,这里后台返回的是二进制文本格式,对应axios就是blob
function downExcelAction(url,data) {
return axios({
url: url,
method: 'post',
data: data
headers: { //需要修改为表单提交的格式,默认为application/json
'Content-Type': 'application/x-www-form-urlencoded'
},
transformRequest: [function(data) {
let ret = ''
for(let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
responseType: 'blob'
})
}
5、写一个回调,处理二进制文本,进行下载,处理方式就是创建一个a标签dom,将二进制文本放进一个bolb文本对象,通过href的方式去实现下载
function downExcelAction(url,data) {
return axios({
url: url,
method: 'post',
data: data
headers: { //需要修改为表单提交的格式,默认为application/json
'Content-Type': 'application/x-www-form-urlencoded'
},
transformRequest: [function(data) {
let ret = ''
for(let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
responseType: 'blob'
}).then(res=>{ //回调处理
var blob = new Blob([res], { type: 'application/vnd.ms-excel application/x-excel;charset=utf-8' });
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob);
downloadElement.href = href;
downloadElement.download = data.bigTile+'.xls'; //博主下载的是excel,根据个人需求改变后缀
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(href);
})
}
~~欢迎纠错
啾咪