vue 下载文件
<el-button @click="Download">
模板下载
</el-button>
Download(){
//下载文件
Download(blobType='application/ynd.ms-excel;charset=UTF-8'){
//调接口
dowmloadModel({id:this.form.id}).then(res=>{
//先把后端返回的文件流,包装成一个Blob类型
let locaHref = window.URL.creatObjectURL(
new Blob([res.data],[type:blobType])
)
//创建一个a标签用来下载文件
let ele = document.creatElement('a')
ele.href = locaHref;
//download属性决定下载的文件的名字
//从请求头里获取文件名
ele.download = res.headers.fileName;
document.querySelectorAll('body')[0].appendChild(ele);
ele.click();
//主动移除a标签来释放内存
setTimeout(()=>{
ele.remove();
},1000)
}).catch(res=>{
this.$message.error('请求失败');
})
}
//文件可以正常下载了,但是下载之后的文件名是乱码的
所以这边需要在response响应拦截器转义
service.interceptors.response.use(
async response =>{
let res = response.data;
if(!!response.headers.filename){
//对文件名乱码转义
let iconv = require('iconv-lite');
//忽略警告
iconv.skipDecodeWarning = true;
response.headers.filename = iconv.decode(response.headers.filename,'UTF-8');
res=response;
}
return Promise.resove(res);
},
error =>{
return Promise.reject(error);
}
)
后端需要给我们返回请求头的内容如图所示: