当前位置：首页 > VUE

vue 实现文件地址

2026-01-19 16:41:14VUE

Vue 实现文件下载功能

在Vue中实现文件下载功能通常可以通过前端直接触发下载或通过后端API返回文件流。以下是几种常见方法：

前端直接下载（适用于公开URL）

对于已知的公开文件URL，可以直接通过<a>标签或window.open实现下载：

// 方法1：创建a标签下载
const downloadFile = (url, fileName) => {
  const link = document.createElement('a')
  link.href = url
  link.download = fileName || 'downloaded-file'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// 使用示例
downloadFile('https://example.com/file.pdf', 'document.pdf')

通过Blob对象下载（适用于后端返回二进制流）

当后端返回文件流时，需要将响应数据转换为Blob对象：

// 方法2：处理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', 'filename.ext')
  document.body.appendChild(link)
  link.click()
  link.remove()
  window.URL.revokeObjectURL(url)
})

使用FileSaver.js库

对于更复杂的下载需求，可以使用FileSaver.js简化操作：

import { saveAs } from 'file-saver'

// 示例1：保存文本
saveAs(new Blob(["Hello, world!"], { type: "text/plain;charset=utf-8" }), "hello.txt")

// 示例2：保存API返回的文件
axios.get('/api/file', { responseType: 'blob' })
  .then(res => saveAs(res.data, 'document.pdf'))

处理大文件下载进度

对于大文件下载，可以添加进度提示：

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