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