文件下载通常有以下几种方法
- 通过url下载
- 通过地址跳转location.href 下载
- 通过提交form表单下载
- a.download结合blob对象进行下载
暂时只用过第四种,使用成功,因此总结文件下载方法四
a.download结合blob对象进行下载
一、思路
- 利用Bold接收数据
- 利用a标签做文件下载
二.相关代码
- 调用方法
export const exportAlarmList = (data:any) =>
axios.post(
url,
data,
{
headers:
{'Content-Type':'application/json' },
responseType: 'blob'
});
- 返回结果
let fileName = decodeURI(error.headers['content-disposition'].split(';')[1].split('=')[1]);
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
// 生成文件路径
let url = window.URL.createObjectURL(blob);
//生成<a></a>DOM元素
let el = document.createElement('a');
//链接赋值
el.href = url;
el.setAttribute('download', fileName);
//必须点击否则不会下载
el.click();
//移除链接释放资源
window.URL.revokeObjectURL(url);
三 .代码要点:
-
设置responseType: 'blob’: 解决下载下来的文件乱码问题
-
设置type: 'application/vnd.ms-excel; 设置excel文件的格式.(该格式需要与后台确认)
office中后缀对应的content-type查看
-
若后台传过来的文件名中有中文,则需要对该文件名进行转码
-
responseType是单独的,不可写入header中