当前位置：首页 > VUE

vue文件下载实现方式

2026-02-23 19:46:50VUE

使用 Blob 对象和 URL.createObjectURL

通过后端接口获取文件流后，前端将响应数据转换为 Blob 对象，生成临时 URL 并触发下载。

axios.get('/api/download', { responseType: 'blob' }).then(response => {
  const blob = new Blob([response.data])
  const url = window.URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = 'filename.ext'
  link.click()
  window.URL.revokeObjectURL(url)
})

使用 FileSaver.js 库

安装 FileSaver 库简化下载流程，支持大文件下载和自定义文件名。

vue文件下载实现方式

npm install file-saver

import { saveAs } from 'file-saver'

axios.get('/api/download', { responseType: 'blob' }).then(response => {
  saveAs(new Blob([response.data]), 'custom_filename.ext')
})

处理后端返回的文件流

当后端返回文件流时，确保设置正确的响应类型和请求头。

axios({
  url: '/api/download',
  method: 'GET',
  responseType: 'blob',
  headers: {
    'Content-Type': 'application/octet-stream'
  }
}).then(response => {
  // 处理下载逻辑
})

处理进度显示

添加进度条功能提升用户体验，适用于大文件下载场景。

vue文件下载实现方式

axios.get('/api/download', {
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100)
    console.log(`下载进度: ${percent}%`)
  }
}).then(response => {
  // 文件下载完成处理
})

处理错误情况

添加错误处理逻辑应对网络异常或服务端错误。

axios.get('/api/download', { responseType: 'blob' })
  .then(response => {
    // 成功处理
  })
  .catch(error => {
    console.error('下载失败:', error)
    if (error.response.status === 404) {
      alert('文件不存在')
    }
  })

浏览器兼容性处理

针对 IE 浏览器的特殊处理方案。

if (window.navigator.msSaveOrOpenBlob) {
  // IE专用方法
  window.navigator.msSaveBlob(new Blob([response.data]), 'filename.ext')
} else {
  // 标准浏览器方法
  const link = document.createElement('a')
  // ...正常下载逻辑
}