前端 从后端获取（下载，导出）文件的方法

场景：

很多时候，前端存在需要从后端下载文件的情况，典型的就是导出excel表格。

一般存在两种方式：

1，请求接口之后，直接打开请求该文件的地址，下载到本地。

2，请求接口之后，将获取到的文件数据格式转换之后，再下载到本地。

 

先说第一种:

很简单，请求完接口之后，打开该文件的地址：

window.location.href = res.request.responseURL

responseURL这个地址其实和接口地址是一样，直接打开它，就能默认下载到本地的下载路径了。

非常方便，但是存在不足，比如不能修改文件的名称。 

而且，有些场景使用这种方式是行不通的，比如，很多管理系统，都是需要登录的，既然要登录，那就一般都会需要验证每个请求是否安全，往往需要在header里带上token，后端才会给你这个请求放行。

所以，这种方式，你请求接口之后，转到这个链接，其实就是再请求了一次，这个时候你是不好在请求里带上token的，自然也就拿不到你要的文件。

所以，这个时候就要用第二种方式。

第二种方式：

第二种方式，就是正常的api请求，获取到文件数据之后，在本地模拟一次点击按钮下载，不过这次下载不是再向后端请求一次api,而是把第一次请求api之后，后端返回的文件数据转换成合适的格式之后下载下来。

exportFile(this.queryParam).then(res => {
        if (res.status === 200) {
          const xlsx = 'application/vnd.ms-excel'
          const blob = new Blob([res.data], { type: xlsx })
          const a = document.createElement('a') // 转换完成，创建一个a标签用于下载
          // const name = res.headers['content-disposition']
          // a.download = name.split('=')[1]
          a.download = `${this.$t('menu.operatelog')}.xlsx`
          a.href = window.URL.createObjectURL(blob)
          a.click()
          a.remove()
          document.body.removeChild(a) //也可以这么移除
          // 直接打开下载文件的链接
          // window.location.href = res.request.responseURL
        }
      })

代码很容易看懂，这里就不解释了，说几个需要提醒的地方。

1.不管是第一种方式还是第二种方式，尽量让后端指定好文件的类型。当然，使用第二种方式，前端可以再次指定好文件类型。

2.这里将获取到的文件内容转换成blob类型的数据，是最常见的下载文件数据的格式，当然还可以使用别的方式。

3.这里创建a标签取下载文件，还可以用别的方式，或者如果碰到浏览器兼容性的问题，可能需要个性化处理。

4.download这里可以拿后端返回的文件名，也可以自己定义文件名，看你自己哪个方便一些。如果后端拿到的文件名是乱码，建议直接在前端定义文件名。

5.最关键的是，下载文件乱码的问题，很多人碰到，解决方法也很简单。

export function exportFile (parameter) {
  return axios({
    url: `${api.file}/export`,
    method: 'get',
    data: parameter,
    header: {
      headers: { 'Content-Type': 'application/x-download' }
    },
    responseType: 'blob'
  })
}

在请求接口的header里一定要指定responseType为blob，否则把返回的文件数据转换成blob对象，blob是不认识的，就会出现乱码。

 

欢饮补充。