代码如下
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 对象。
参考链接