vue下载的功能实现
Vue 文件下载功能实现
在 Vue 项目中实现文件下载功能可以通过多种方式完成，具体取决于文件来源（本地或远程）和项目需求。
前端直接触发下载（本地文件）
对于存储在项目 public 或 assets 目录下的本地文件，可以使用 <a> 标签原生下载功能：
<template>
<a href="/path/to/file.pdf" download="自定义文件名.pdf">下载文件</a>
</template>通过 Blob 对象下载远程文件
当需要从 API 获取文件流时，可以使用以下方法：
export function downloadFile(url, fileName) {
fetch(url)
.then(response => response.blob())
.then(blob => {
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = fileName
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
}处理后端返回的文件流
如果后端返回的是二进制流，需要设置正确的响应类型：
axios.get('/api/download', {
responseType: 'blob'
}).then(response => {
const blob = new Blob([response.data])
const downloadUrl = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = downloadUrl
link.download = 'filename.ext'
link.click()
window.URL.revokeObjectURL(downloadUrl)
})处理大文件下载进度
对于大文件下载，可以添加进度提示：
axios.get('/api/large-file', {
responseType: 'blob',
onDownloadProgress: progressEvent => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
console.log(`${percentCompleted}%`)
}
}).then(response => {
// 处理下载完成逻辑
})使用第三方库简化操作
可以考虑使用 file-saver 库简化操作：
import { saveAs } from 'file-saver'
// 使用示例
saveAs(blob, 'filename.ext')注意事项
- 跨域问题需要后端配置 CORS 头信息
- 二进制文件需要确保响应头
Content-Type正确 - 移动端可能需要特殊处理
- 下载完成后及时释放内存
URL.revokeObjectURL()
以上方法覆盖了 Vue 项目中常见的文件下载场景，开发者可根据具体需求选择合适方案。
