vue实现附件下载
实现附件下载的方法
在Vue中实现附件下载通常涉及前端与后端的交互。以下是几种常见的实现方式：
通过<a>标签直接下载
如果附件是静态资源或已有直接访问的URL，可以直接使用<a>标签的download属性实现下载：
<a :href="fileUrl" download="filename.ext">下载文件</a>通过Blob对象下载
当后端返回文件流时，可以使用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()
})通过后端返回文件URL
后端可以返回文件临时URL，前端通过重定向或新窗口打开：
window.open(downloadUrl, '_blank')处理大文件分片下载
对于大文件，可能需要分片下载：
async function downloadLargeFile() {
const chunkSize = 1024 * 1024 // 1MB
let offset = 0
const chunks = []
while(true) {
const response = await axios.get('/api/download', {
headers: { 'Range': `bytes=${offset}-${offset + chunkSize}` }
})
if(!response.data) break
chunks.push(response.data)
offset += chunkSize
}
const blob = new Blob(chunks)
// 创建下载链接...
}处理认证和权限
需要认证的下载请求可以添加token：
axios.get('/api/download', {
headers: { 'Authorization': `Bearer ${token}` },
responseType: 'blob'
})注意事项
- 确保服务器正确设置CORS头
- 对于敏感文件，应在后端验证权限
- 大文件下载应考虑进度提示
- 不同浏览器对Blob对象的支持可能不同
以上方法可根据具体需求选择使用，Blob方式适用于大多数现代浏览器场景。
