当前位置：首页 > VUE

vue如何实现文件下载

2026-02-22 01:17:04VUE

使用 `a` 标签实现下载

通过动态创建 a 标签并设置 href 和 download 属性实现文件下载。适用于直接下载静态文件或后端返回的文件流。

// 静态文件路径下载
const downloadFile = (url, fileName) => {
  const link = document.createElement('a')
  link.href = url
  link.download = fileName || 'file'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// 使用示例
downloadFile('/path/to/file.pdf', 'document.pdf')

通过 Blob 对象下载

处理后端返回的二进制数据（如文件流）时，可将数据转换为 Blob 对象生成临时 URL。

vue如何实现文件下载

// 处理二进制流下载
const downloadBlob = (data, fileName, mimeType) => {
  const blob = new Blob([data], { type: mimeType })
  const url = window.URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = fileName
  link.click()
  window.URL.revokeObjectURL(url)
}

// 配合axios示例
axios.get('/api/download', { responseType: 'blob' }).then(res => {
  downloadBlob(res.data, 'report.xlsx', 'application/vnd.ms-excel')
})

使用 FileSaver.js 库

对于需要更复杂处理的场景（如大文件分块下载），可使用专用库简化操作。

安装依赖：

vue如何实现文件下载

npm install file-saver

使用示例：

import { saveAs } from 'file-saver'

// 保存文本文件
saveAs(new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8' }), 'hello.txt')

// 保存图片
fetch('/image.png').then(res => res.blob()).then(blob => {
  saveAs(blob, 'image.png')
})

处理权限问题

当下载需要认证的资源时，需确保请求携带正确的认证信息：

axios.get('/protected-file', {
  responseType: 'blob',
  headers: { 'Authorization': 'Bearer ' + token }
}).then(res => {
  const contentType = res.headers['content-type']
  downloadBlob(res.data, 'secure_file.zip', contentType)
})