Vue 实现下载
Vue 实现文件下载的方法
前端下载（纯前端生成文件）
适用于需要动态生成文件内容并下载的场景，如导出表格数据为 CSV 或 Excel。
// 创建 Blob 对象并触发下载
const downloadFile = (content, fileName, type = 'text/plain') => {
const blob = new Blob([content], { type })
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = fileName
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url)
}
// 使用示例（导出CSV）
const exportCSV = () => {
const csvContent = '姓名,年龄\n张三,25\n李四,30'
downloadFile(csvContent, '用户数据.csv', 'text/csv')
}后端接口下载
适用于从服务器获取文件进行下载的场景，如下载服务器上的 PDF 或图片。
// 通过接口下载文件
const downloadFromServer = (url, fileName) => {
fetch(url)
.then(response => response.blob())
.then(blob => {
const downloadUrl = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = downloadUrl
a.download = fileName
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(downloadUrl)
})
}
// 使用示例
downloadFromServer('/api/download/file.pdf', '文档.pdf')使用 axios 下载文件
当需要处理更复杂的请求（如带认证头）时，可以使用 axios。
import axios from 'axios'
const downloadWithAxios = (url, fileName) => {
axios({
url,
method: 'GET',
responseType: 'blob',
headers: { Authorization: 'Bearer your_token' }
}).then(response => {
const downloadUrl = URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = downloadUrl
link.download = fileName
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(downloadUrl)
})
}处理大文件下载
对于大文件下载，可以显示进度条。
const downloadLargeFile = (url, fileName) => {
axios({
url,
method: 'GET',
responseType: 'blob',
onDownloadProgress: progressEvent => {
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total)
console.log(`下载进度: ${percent}%`)
// 可以更新 Vue 组件中的进度状态
}
}).then(response => {
// 同上处理下载
})
}注意事项
- 跨域问题需要后端配置 CORS
- 移动端可能需要特殊处理
- 某些浏览器可能会拦截弹出式下载窗口
- 对于敏感文件，建议通过后端验证权限
以上方法可以根据实际需求组合使用，前端生成适合简单数据导出，后端下载适合已有文件的场景。
