vue文件下载实现

Vue 文件下载实现方法

使用 <a> 标签下载

通过动态创建 <a> 标签实现下载，适用于已知文件 URL 的场景：

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)
}

通过 Blob 对象下载

适用于后端返回二进制流数据的场景：

axios.get('/api/download', { responseType: 'blob' }).then(res => {
  const blob = new Blob([res.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 简化下载流程：

npm install file-saver

使用示例：

import { saveAs } from 'file-saver'

// 从URL下载
saveAs('https://example.com/file.pdf', 'custom-name.pdf')

// 从Blob下载
const blob = new Blob([data], { type: 'application/octet-stream' })
saveAs(blob, 'filename.ext')

处理大文件分片下载

对于大文件可采用分片下载：

const downloadChunked = async (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)
  saveAs(blob, filename)
}

添加下载进度提示

结合 axios 的 onDownloadProgress 实现进度显示：

axios.get('/large-file', {
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percent = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    console.log(`Download: ${percent}%`)
  }
}).then(res => {
  // 处理下载完成逻辑
})

服务端配合要求

后端接口需要设置正确的响应头：

Content-Disposition: attachment; filename="example.pdf"
Content-Type: application/octet-stream