Axios.post(url, {/*传入的参数*/}, { responseType: 'blob'} /*设置返回值的类型,这里设置文件流blob的形式*/)
.then(res => {
let blob = new Blob([res.data], {
type: 'application/xlsx;charset=utf-8'/*application/xlsx // 这里写要下载的文件格式;charset=utf-8*/
});
// 获取后端返回的文件名 --> 后端配合response.setHeader("Content-disposition", "attachment; filename=xxxx.xlsx") 设置的文件名
// 注意: 有时候axios返回的res.headers里面可能不包含content-disposition字段
//这是因为默认情况下,header只会暴露Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma这6个字段
// 此时需要后端设置response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")将content-disposition字段暴露出去
let fileName = res.headers['content-disposition'].split(';')[1];
fileName = decodeURI(fileName).substring(9)
let eleLink = document.createElement('a');
// eleLink.download = '模板.xlsx' // 这里写的是下载文件的名称
eleLink.download = fileName // 这里是后端返回的文件名称
eleLink.style.display = 'none';
// 字符内容转变成blob地址
// URL.createObjectURL(blob)会创建URL对象,返回一个下载文件的地址
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 释放URL对象
URL.revokeObjectURL(eleLink.href)
// 然后移除
document.body.removeChild(eleLink);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Axios.get(url, { params: {}, responseType: 'blob' }).then(res => {
let blob = new Blob([res.data], {
type: 'application/xlsx;charset=utf-8'
});
// 获取后端返回的文件名 --> 后端配合response.setHeader("Content-disposition", "attachment; filename=xxxx.xlsx") 设置的文件名
// 注意: 有时候axios返回的res.headers里面可能不包含content-disposition字段
//这是因为默认情况下,header只会暴露Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma这6个字段
// 此时需要后端设置response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")将content-disposition字段暴露出去
let fileName = res.headers['content-disposition'].split(';')[1];
fileName = decodeURI(fileName).substring(9)
let eleLink = document.createElement('a');
// eleLink.download = '模板.xlsx' // 这里写的是下载文件的名称
eleLink.download = fileName // 这里是后端返回的文件名称
eleLink.style.display = 'none';
// 字符内容转变成blob地址
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
URL.revokeObjectURL(eleLink.href)
document.body.removeChild(eleLink);
})
vue对后台返回的二进制流进行下载(vue+axios)
1.设置axios的数据返回类型为blob
responseType:“blob”
2.接收后台返回的二进制流数据res
var blob = new Blob([res.data]); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
var contentDisposition = res.headers["content-disposition"]; //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
var patt = new RegExp("filename=([^;]+\.[^\.;]+);*");
var result = patt.exec(contentDisposition);
var filename = result[1];
if (window.navigator.msSaveOrOpenBlob) {
//兼容ie
navigator.msSaveBlob(blob, filename);
} else {
var downloadElement = document.createElement("a");
var href = window.URL.createObjectURL(blob); //创建下载的链接
var reg = /^["](.*)["]$/g;
downloadElement.style.display = "none";
downloadElement.href = href;
downloadElement.download = decodeURI(filename.replace(reg, "$1")); //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
}