当前位置：首页 > VUE

vue下载实现

2026-03-07 16:04:56VUE

Vue下载实现方法

在Vue项目中实现文件下载功能可以通过多种方式完成，具体取决于文件来源和需求场景。

前端直接生成下载

对于简单文本或数据生成的文件，可以使用Blob对象和URL.createObjectURL方法：

downloadTextFile(content, filename) {
  const blob = new Blob([content], { type: 'text/plain' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = filename
  link.click()
  URL.revokeObjectURL(link.href)
}

后端返回文件流下载

当文件来自后端API时，通常需要处理二进制流响应：

axios.get('/api/download', {
  responseType: 'blob'
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]))
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', 'file.pdf')
  document.body.appendChild(link)
  link.click()
  link.remove()
})

大文件分块下载

对于大文件下载，建议实现分块下载和进度显示：

vue下载实现

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

  while(true) {
    const { done, value } = await reader.read()
    if (done) break
    chunks.push(value)
    receivedLength += value.length
    console.log(`Downloaded ${receivedLength} of ${contentLength}`)
  }

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