axios用get或post请求下载文件，可下载原来的文件名

一、get请求下载:

window.open(url, params)

 

二、post请求下载

创建一个a标签下载
axios({
      url: url,
      method: 'post',
      data: data,
      responseType: 'blob'
    }).then(res => {
      let blob = new Blob([res.data])
      let url = window.URL.createObjectURL(blob)
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      // 文件名一般是在res.headers里：content-disposition;fileName=xxxxxxxxxx.csv，这个让后端统一规定文件名怎么放前端就怎么取就行
      let str = typeof res.headers['content-disposition'] === 'undefined'
                  ? res.headers['Content-Disposition'].split(';')[1]
                  : res.headers['content-disposition'].split(';')[1]
      
      let filename = typeof str.split('fileName=')[1] === 'undefined'
                      ? str.split('filename=')[1]
                      : str.split('fileName=')[1]
      link.setAttribute('download', decodeURIComponent(filename)) // 解码，这里也可以自定义下载的文件名字，如link.setAttribute('download', 'xxxxxdownload.xls')
      document.body.appendChild(link)
      link.click() //用新窗口打开window.open(link.click())，但是下载完成后不会先get请求那样自动关闭窗口
    })
    .catch(error => {
      console.log(error)
    })

 

用哪种方式下载：

1）下载文件比较大建议使用get。如果用post，点了会半天没反应，得加loading之类的而且体验也不好，用get在用window.open打开新窗口下载，下载完后会自动关闭窗口体验比较好

2）下载文件不大而且传参很多的话建议使用post。不过只能在本页面下载，不能打开新窗口下载，哪怕把数据放到window.open打开新窗口下载，但下载完成后不会自动关闭新窗口

3）下载文件很大而且传参也很大建议用get，传参过长超过浏览器限制，那让后台再加一个post接口，把这些多的参数用这个post传过去，再回传一下类似秘钥之类的用于get下载