java下载功能vue实现
实现Java后端文件下载的Vue前端方案
后端接口准备
确保Java后端已提供文件下载接口，通常使用HttpServletResponse输出文件流。示例接口路径为/api/download，支持GET或POST请求。
前端Axios请求配置
在Vue组件中使用Axios发起下载请求，需要设置responseType: 'blob'以正确处理二进制流：
axios.get('/api/download', {
responseType: 'blob',
params: { filename: 'example.pdf' } // 可选参数
}).then(response => {
const blob = new Blob([response.data])
const downloadUrl = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = downloadUrl
link.setAttribute('download', 'filename.ext') // 设置下载文件名
document.body.appendChild(link)
link.click()
link.remove()
window.URL.revokeObjectURL(downloadUrl)
})处理进度显示（可选）
添加下载进度条需监听Axios的onDownloadProgress事件：
const progress = ref(0)
axios.get('/api/download', {
responseType: 'blob',
onDownloadProgress: progressEvent => {
progress.value = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
}
})错误处理
捕获下载过程中的异常情况：
try {
const response = await axios.get('/api/download', {
responseType: 'blob'
})
// ...处理下载逻辑
} catch (error) {
console.error('下载失败:', error)
// 显示错误提示
}封装为可复用方法
将下载逻辑封装为工具函数：
// utils/download.js
export function downloadFile(url, filename) {
return axios.get(url, {
responseType: 'blob'
}).then(response => {
// ...实现下载逻辑
})
}
// 组件中使用
import { downloadFile } from '@/utils/download'
downloadFile('/api/download', 'report.pdf')大文件分片下载（进阶）
处理大文件时可实现分片下载：
const CHUNK_SIZE = 1024 * 1024 // 1MB
async function downloadLargeFile(url, filename) {
const { headers } = await axios.head(url)
const totalSize = headers['content-length']
const chunks = Math.ceil(totalSize / CHUNK_SIZE)
for (let i = 0; i < chunks; i++) {
const rangeStart = i * CHUNK_SIZE
const rangeEnd = Math.min(rangeStart + CHUNK_SIZE - 1, totalSize - 1)
const chunk = await axios.get(url, {
responseType: 'blob',
headers: { Range: `bytes=${rangeStart}-${rangeEnd}` }
})
// 合并分片到Blob
}
}浏览器兼容性处理
对于旧版浏览器需添加兼容性判断：
if (window.navigator.msSaveBlob) {
// IE10+专用方法
window.navigator.msSaveBlob(blob, filename)
} else {
// 标准方法
const link = document.createElement('a')
// ...标准下载逻辑
}安全控制
添加权限验证时可在请求头携带token：
axios.get('/api/download', {
responseType: 'blob',
headers: {
'Authorization': `Bearer ${store.state.token}`
}
})
