当前位置：首页 > VUE

Vue 实现下载

2026-01-18 23:09:16VUE

Vue 实现文件下载的方法

前端下载（纯前端生成文件）

适用于需要动态生成文件内容并下载的场景，如导出表格数据为 CSV 或 Excel。

// 创建 Blob 对象并触发下载
const downloadFile = (content, fileName, type = 'text/plain') => {
  const blob = new Blob([content], { type })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = fileName
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
}

// 使用示例（导出CSV）
const exportCSV = () => {
  const csvContent = '姓名,年龄\n张三,25\n李四,30'
  downloadFile(csvContent, '用户数据.csv', 'text/csv')
}

后端接口下载

适用于从服务器获取文件进行下载的场景，如下载服务器上的 PDF 或图片。

Vue 实现下载

// 通过接口下载文件
const downloadFromServer = (url, fileName) => {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const downloadUrl = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = downloadUrl
      a.download = fileName
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(downloadUrl)
    })
}

// 使用示例
downloadFromServer('/api/download/file.pdf', '文档.pdf')

使用 axios 下载文件

当需要处理更复杂的请求（如带认证头）时，可以使用 axios。

Vue 实现下载

import axios from 'axios'

const downloadWithAxios = (url, fileName) => {
  axios({
    url,
    method: 'GET',
    responseType: 'blob',
    headers: { Authorization: 'Bearer your_token' }
  }).then(response => {
    const downloadUrl = URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = downloadUrl
    link.download = fileName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(downloadUrl)
  })
}

处理大文件下载

对于大文件下载，可以显示进度条。

const downloadLargeFile = (url, fileName) => {
  axios({
    url,
    method: 'GET',
    responseType: 'blob',
    onDownloadProgress: progressEvent => {
      const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total)
      console.log(`下载进度: ${percent}%`)
      // 可以更新 Vue 组件中的进度状态
    }
  }).then(response => {
    // 同上处理下载
  })
}

注意事项