Axios 如何通过配置实现通过接口请求下载文件

news2025/5/31 18:12:51

前言

今天，我写了《Nodejs 实现 Mysql 数据库的全量备份的代码演示》和《NodeJS 基于 Koa, 开发一个读取文件，并返回给客户端文件下载》两篇文章。在这两篇文章中，我实现了数据库的备份，和提供数据库下载等接口。

但是，在我们给接口加上鉴权以后，直接通过 window.open 或者 axios 的默认配置访问接口，是不能下载的。

因为，我们的下载接口，是需要用户鉴权的，所以排除了 window.open 方法。而我们一般配置的 axios 是用来处理接口的 JSON 数据的。所以，这也不支持文件的下载。

怎么办呢？其实，通过一点点的配置，就可以实现了。

axios

AXIOS 后处理实现

原理也很简单，我们在接口请求的时候，指定返回的是 blob 对象，然后在后处理里，根据这个配置参数判断，直接将服务端返回的数据 return 出去即可。

// 创建 axios
const service = axios.create({
  baseURL: '/api/v1', // url = base url + request url
  timeout: 50000 // request timeout
})
// 前处理这里不展示
// service.interceptors.request.use...
service.interceptors.response.use(
  (response) => {
    // 如果是文件下载，直接返回 response
    if (response.config.responseType === 'blob') {
      return Promise.resolve(response)
    }
    // 其他正常逻辑，我们这里不展示了，每个人的习惯和代码也都不一样·
  }
)

调用接口实现文件加载

在调用接口的地方，我们指定返回数据类型为 blob 对象，然后用 js 创建一个临时下载链接，从而实现在浏览器中下载文件即可。

request({
  url: `${ApiName}/${fileName}`,
  method: 'get',
  // 指定返回 blob 对象
  responseType: 'blob'
}).then((response) => {
  // 获取文件名
  const disposition = response.headers['content-disposition']
  let fileName = 'download'
  if (disposition) {
    fileName = disposition.split('filename=')[1]
  }

  // 创建下载链接
  const blob = new Blob([response.data])
  const link = document.createElement('a')
  link.href = window.URL.createObjectURL(blob)
  link.download = fileName
  link.click()
  window.URL.revokeObjectURL(link.href)
})