vue下载功能实现
实现 Vue 文件下载功能
在 Vue 中实现文件下载功能可以通过多种方式完成，以下是几种常见的方法：
使用 <a> 标签下载
创建一个带有 download 属性的 <a> 标签，适用于静态文件或已知 URL 的情况。
<template>
<a href="/path/to/file.pdf" download>下载文件</a>
</template>通过 Blob 对象动态下载
对于需要从 API 获取数据并生成文件的情况，可以使用 Blob 对象。
export default {
methods: {
downloadFile() {
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()
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
})
}
}
}下载 Base64 编码文件
如果文件是 Base64 编码的字符串，可以这样处理：
function downloadBase64File(base64Data, fileName) {
const link = document.createElement('a')
link.href = `data:application/octet-stream;base64,${base64Data}`
link.download = fileName
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}使用 FileSaver.js 库
FileSaver.js 是一个简化文件保存操作的库。
import { saveAs } from 'file-saver'
// 使用示例
saveAs(new Blob([data]), 'filename.ext')处理大文件下载
对于大文件下载，可以显示进度条：
axios({
method: 'get',
url: '/api/large-file',
responseType: 'blob',
onDownloadProgress: progressEvent => {
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
console.log(percentCompleted)
}
}).then(response => {
// 处理下载逻辑
})服务端配合
确保服务端正确设置响应头：
Content-Disposition: attachment; filename="filename.ext"
Content-Type: application/octet-stream注意事项
- 跨域请求需要服务端配置 CORS 头
- 移动端浏览器可能有不同的行为
- 某些文件类型可能需要特定的 MIME 类型
- 对于敏感文件，建议添加权限验证
