当前位置：首页 > VUE

vue文件下载实现

2026-01-15 08:35:09VUE

使用 Blob 对象下载文件

在 Vue 中可以通过创建 Blob 对象实现文件下载。通过将后端返回的二进制数据转换为 Blob，再生成下载链接触发浏览器下载行为。

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', 'filename.ext')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
})

使用 FileSaver.js 库

FileSaver.js 提供了更简单的文件保存接口，适用于大多数现代浏览器。安装后可直接调用 saveAs 方法。

npm install file-saver

import { saveAs } from 'file-saver'

axios.get('/api/download', { responseType: 'blob' }).then(response => {
  saveAs(response.data, 'filename.ext')
})

处理大文件分片下载

对于大文件下载，可以实现分片下载功能。通过设置 Range 请求头获取文件片段，最后合并所有片段。

async function downloadLargeFile(url, filename) {
  const chunkSize = 1024 * 1024 // 1MB
  let startByte = 0
  let chunks = []

  while(true) {
    const endByte = startByte + chunkSize - 1
    const response = await axios.get(url, {
      responseType: 'blob',
      headers: { 'Range': `bytes=${startByte}-${endByte}` }
    })

    if(response.status === 206) {
      chunks.push(await response.data.arrayBuffer())
      startByte += chunkSize
    } else {
      break
    }
  }

  const blob = new Blob(chunks)
  saveAs(blob, filename)
}

前端生成文件下载

对于需要在前端生成文件内容再下载的场景，可以直接创建数据 URL 实现下载。

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

处理下载进度显示

通过 axios 的 onDownloadProgress 配置可以获取下载进度，适用于需要显示进度条的场合。

vue文件下载实现

axios.get('/api/download', {
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percent = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    console.log(`下载进度: ${percent}%`)
  }
}).then(response => {
  saveAs(response.data, 'file.ext')
})