React中使用axios get下载文件

代码如下

let downloadUrl = `/api/aaa/bbb?resultId=${resultId}&type=${specifyType}` axios({ method: 'get', url: downloadUrl, responseType: 'blob' }).then( res => { if(!res) { return } let url = window.URL.createObjectURL(new Blob([res.data], {type: 'text/csv'})) console.log(res.data,) console.log('header', res.headers, res.data.headers) let a = document.createElement('a') a.href= url let content = res.headers['content-disposition'].split(';')[1].split('UTF-8')[1].substr(2) console.log(content) let decode = decodeURI(content, 'UTF-8') console.log('decode', decode) a.setAttribute('download', decode) document.body.appendChild(a) a.click() URL.revokeObjectURL(a.href) document.body.removeChild(a) })

我是先定义下载地址，然后设置axios请求的responseType为'blob,拿到响应后，使用URL.createObjectURL()创建URL对象，newBlob()里面第二个参数type为返回文件的类型，我这里是'csv'对应的MIME类型。

文件名获取我是从响应的头部'content-disosition'获取的。打印的响应头部，及转码后的文件名如下

文件名还是根据后端返回，自己获取。有的也可能写在header的filename字段。

下载文件结束，使用URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。

参考链接

https://www.jb51.net/article/170791.htm