vue 实现附件下载
实现附件下载的基本方法
在Vue中实现附件下载通常需要结合后端API和前端逻辑。以下是几种常见的实现方式：
通过a标签直接下载
对于静态文件或已知URL的资源，可以直接使用HTML的a标签实现下载：
<template>
<a href="/path/to/file.pdf" download="filename.pdf">下载文件</a>
</template>download属性指定下载时的默认文件名。
通过Blob对象下载动态内容
当需要从API获取文件数据时，可以使用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()
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)
})
}处理大文件下载进度
对于大文件下载，可以添加进度提示：
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中实现附件下载的主要场景，开发者可以根据具体需求选择合适的方式。
