当前位置：首页 > VUE

vue 实现文件下载

2026-01-18 08:32:06VUE

使用 `window.open` 方法

通过 window.open 直接打开文件链接触发下载，适用于已知文件 URL 的情况：

window.open('文件URL', '_blank')

使用 `<a>` 标签动态创建下载链接

动态生成 <a> 标签并模拟点击，适用于需要从后端获取下载链接的场景：

const link = document.createElement('a')
link.href = '文件URL'
link.download = '文件名.扩展名' // 设置下载文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link)

通过 Blob 对象下载二进制数据

当需要下载后端返回的二进制流数据时（如 Axios 请求）：

axios.get('接口URL', { responseType: 'blob' }).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]))
  const link = document.createElement('a')
  link.href = url
  link.download = '文件名.扩展名'
  document.body.appendChild(link)
  link.click()
  window.URL.revokeObjectURL(url)
  document.body.removeChild(link)
})

使用 FileSaver.js 库

对于需要更复杂下载需求的场景，可以使用第三方库 FileSaver.js：

npm install file-saver

import { saveAs } from 'file-saver'

// 保存文本
saveAs(new Blob(['文件内容'], { type: 'text/plain' }), 'filename.txt')

// 保存Blob对象
saveAs(blobObject, 'filename.ext')

处理大文件分片下载

对于大文件下载，可以结合后端实现分片下载：

vue 实现文件下载

async function downloadLargeFile(url, fileName) {
  const response = await fetch(url)
  const reader = response.body.getReader()
  const contentLength = +response.headers.get('Content-Length')
  let receivedLength = 0
  const chunks = []

  while(true) {
    const { done, value } = await reader.read()
    if (done) break
    chunks.push(value)
    receivedLength += value.length
    console.log(`下载进度: ${(receivedLength / contentLength * 100).toFixed(2)}%`)
  }

  const blob = new Blob(chunks)
  const downloadUrl = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = downloadUrl
  a.download = fileName
  a.click()
  URL.revokeObjectURL(downloadUrl)
}