上代码
async downLoad(type) {
axios.get(`/api/unit/template/${type}`, {
baseURL: config.BaseApi,
responseType: 'blob', //设置响应的数据类型为一个包含二进制数据的 Blob 对象，必须设置
headers: {
Authorization: this.token
}
}).then(res => {
if (!res) {
this.$toast.fail("下载模板文件失败");
return false;
}
const blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
const downloadElement = document.createElement('a');
const href = window.URL.createObjectURL(blob);
let filename = "";
// 前提是服务端要在header设置Access-Control-Expose-Headers: Content-Disposition
// 前端才能正常获取到Content-Disposition内容
let contentDisposition = res.headers['content-disposition']; //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
if (contentDisposition) {
let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
let result = patt.exec(contentDisposition);
filename = decodeURI(result[1]);
} else {
filename = "test.doc";
}
downloadElement.style.display = 'none';
downloadElement.href = href;
downloadElement.download = filename; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
}).catch(function (error) { // 请求失败处理
console.log(error);
});
}
需要注意的是
Content-Disposition 这个属性需要服务端设置一下暴露给你才能拿到