当前位置：首页 > VUE

vue 实现附件下载

2026-01-18 16:38:35VUE

实现附件下载的基本方法

在Vue中实现附件下载通常需要结合后端API和前端逻辑。以下是几种常见的实现方式：

通过a标签直接下载

对于静态文件或已知URL的资源，可以直接使用HTML的a标签实现下载：

<template>
  <a href="/path/to/file.pdf" download="filename.pdf">下载文件</a>
</template>

download属性指定下载时的默认文件名。

通过Blob对象下载动态内容

当需要从API获取文件数据时，可以使用Blob对象：

vue 实现附件下载

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

处理后端返回的文件流

对于后端返回的文件流，需要正确设置响应类型：

downloadFile() {
  axios({
    url: '/api/download',
    method: 'GET',
    responseType: 'blob'
  }).then(res => {
    const contentDisposition = res.headers['content-disposition']
    const fileName = contentDisposition.split('filename=')[1]
    const blob = new Blob([res.data])
    const downloadUrl = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = downloadUrl
    a.download = fileName
    a.click()
    URL.revokeObjectURL(downloadUrl)
  })
}

处理大文件下载进度

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

vue 实现附件下载

axios({
  url: '/api/large-file',
  method: 'GET',
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    console.log(percentCompleted)
  }
}).then(res => {
  // 处理下载完成逻辑
})

处理不同文件类型

根据文件类型设置正确的MIME类型：

const fileType = 'application/pdf' // 根据实际文件类型调整
const blob = new Blob([res.data], { type: fileType })

错误处理

添加适当的错误处理逻辑：

.catch(error => {
  console.error('下载失败:', error)
  // 可以在这里显示错误提示
})

封装为可复用组件

可以将下载逻辑封装为可复用的组件或方法：

// utils/download.js
export function downloadFile(url, fileName) {
  // 实现下载逻辑
}

// 在组件中使用
import { downloadFile } from '@/utils/download'

methods: {
  handleDownload() {
    downloadFile('/api/file', 'document.pdf')
  }
}

以上方法涵盖了Vue中实现附件下载的主要场景，开发者可以根据具体需求选择合适的方式。