当前位置：首页 > VUE

vue axios实现下载

2026-02-22 16:46:50VUE

使用 Axios 实现文件下载

在 Vue 项目中，通过 Axios 实现文件下载需要正确处理响应类型和触发浏览器下载行为。以下是具体实现方法：

配置 Axios 请求

设置 responseType 为 'blob'，确保正确处理二进制流数据：

axios({
  url: '/api/download',
  method: 'GET',
  responseType: 'blob' // 关键配置
})

处理响应并触发下载

将返回的 Blob 数据转换为可下载的 URL：

.then(response => {
  const blob = new Blob([response.data])
  const downloadUrl = window.URL.createObjectURL(blob)
  const link = document.createElement('a')

  link.href = downloadUrl
  link.setAttribute('download', 'filename.ext') // 设置文件名
  document.body.appendChild(link)
  link.click()

  // 清理资源
  link.remove()
  window.URL.revokeObjectURL(downloadUrl)
})

处理错误情况

添加错误处理逻辑，特别是网络请求失败或后端返回错误时：

.catch(error => {
  console.error('下载失败:', error)
  // 可以在此处添加用户提示
})

完整示例代码

export function downloadFile() {
  axios({
    url: '/api/download',
    method: 'GET',
    responseType: 'blob'
  }).then(response => {
    const blob = new Blob([response.data])
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')

    a.style.display = 'none'
    a.href = url
    a.download = 'document.pdf'
    document.body.appendChild(a)
    a.click()

    window.URL.revokeObjectURL(url)
    a.remove()
  }).catch(err => {
    alert('文件下载失败')
    console.error(err)
  })
}

后端配合要求

后端需要正确设置响应头：

Content-Type: 对应文件类型的 MIME 类型
Content-Disposition: attachment; filename="filename.ext"

进度显示（可选）

对于大文件下载，可以添加进度提示：

vue axios实现下载

axios({
  // ...其他配置
  onDownloadProgress: progressEvent => {
    const percent = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    console.log(`下载进度: ${percent}%`)
  }
})