当前位置：首页 > VUE

vue下载的功能实现

2026-02-21 13:08:15VUE

实现 Vue 文件下载功能

方法一：使用 <a> 标签下载

通过动态创建 <a> 标签实现文件下载。适用于已知文件 URL 的情况。

function downloadFile(url, fileName) {
  const link = document.createElement('a')
  link.href = url
  link.download = fileName || 'download'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

方法二：Blob 对象下载

当需要下载后端返回的二进制流数据时，可以使用 Blob 对象。

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

方法三：前端生成文件下载

vue下载的功能实现

适用于需要在前端生成文件内容并下载的场景。

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

方法四：大文件分片下载

对于大文件下载，可以实现分片下载功能。

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(`Downloaded ${receivedLength} of ${contentLength}`)
  }

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

注意事项

跨域问题需要后端配置 CORS 头
文件类型需要正确设置 MIME 类型
移动端可能需要特殊处理
大文件下载需要考虑内存占用问题

错误处理

建议为下载功能添加错误处理机制。

function safeDownload(url, fileName) {
  try {
    downloadFile(url, fileName)
  } catch (error) {
    console.error('Download failed:', error)
    // 显示错误提示给用户
  }
}