axios获取后端文件流get/post下载Excel,详细步骤以及踩过的坑

老酸奶ccc

已于 2022-08-23 08:51:13 修改

阅读量8.1k

点赞数 11

分类专栏： JS笔记 vue2.0 文章标签： javascript 前端开发语言

于 2022-08-22 17:42:16 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53350466/article/details/126469254

版权

本文详细介绍了前端通过GET和POST方法实现文件下载的步骤，并着重讲解了在处理文件下载时可能遇到的两个问题：无法获取Content-Disposition头部信息以及后端返回文件流时如何处理。解决方案包括在后端设置Access-Control-Expose-Headers以及手动解析HTTP响应头获取文件名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、先说get的方法，比较简单，直接超链接跳转即可：

const action=url+`/modelTemplate/exportExcel/${Id}` //完整的接口地址

window.open(action, '_self'); // _self参数设置是为了不跳转到新界面上去

2、post方法：

const config={
responseType: 'blob' //这个一定要设置，否则会出现文件下载后打不开的情况
}
axios.post(url,params,config).then(res=>{
	let blob=new Blob([res],{ //设置数据源
    	type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; application/octet-stream'  //设置文件格式
    })
    let objectUrl = URL.createObjectURL(blob); //创建下载的链接
    let a = document.createElement("a");
    a.href = objectUrl;
    a.download = ‘fileName’; //设置文件名
    //下面这个写法兼容火狐
    a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
    window.URL.revokeObjectURL(blob); //释放bolb对象
})

这里如果有对文件名的要求，一般都返回在响应头的’content-disposition’下：