需求
后臺(tái)需要根據(jù)選定的 廠商和設(shè)備型號(hào)，生成對(duì)應(yīng)的excel表格模版
通過(guò)接口返回文件流，采用blob接收
image.png
問(wèn)題
直接將blob文件流存儲(chǔ)為指定文件名，前端還要自己起個(gè)名字
后在接口response的header中發(fā)現(xiàn)了如下參數(shù)content-disposition，那么優(yōu)雅的保存blob的文件就有了方法
image.png
代碼
//axios的請(qǐng)求方式
axios({
url: url+"?a=1&b=2",
method: "get",
responseType:'blob'
})
.then( res => {
let fileName = (res.headers['content-disposition'].split("="))[1]
let blob = res.data
if (typeof window.navigator.msSaveBlob !== 'undefined') {
/*
* For IE
* >=IE10
*/
window.navigator.msSaveBlob(blob, fileName);
} else {
/*
* For Non-IE (chrome, firefox)
*/
var URL = window.URL || window.webkitURL;
var objectUrl = URL.createObjectURL(blob);
if (fileName) {
var a = document.createElement('a');
if (typeof a.download === 'undefined') {
window.location = objectUrl;
} else {
a.href = objectUrl;
a.download = fileName;
document.body.appendChild(a);
a.click();
a.remove();
}
} else {
window.location = objectUrl;
}
}
})
.finally(r => {
});
