vue如何实现下载
实现文件下载的方法
使用<a>标签下载
通过创建隐藏的<a>标签并设置download属性实现文件下载，适用于已知文件URL的情况：
<template>
<button @click="downloadFile">下载文件</button>
</template>
<script>
export default {
methods: {
downloadFile() {
const link = document.createElement('a')
link.href = 'https://example.com/file.pdf'
link.download = 'filename.pdf'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}
}
</script>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.download = 'file.pdf'
document.body.appendChild(link)
link.click()
window.URL.revokeObjectURL(url)
document.body.removeChild(link)
})文件流下载处理 处理可能出现的文件名从响应头中获取的情况：
axios.get('/api/download', { responseType: 'blob' }).then(response => {
const contentDisposition = response.headers['content-disposition']
const fileName = contentDisposition.split('filename=')[1]
const blob = new Blob([response.data])
const downloadUrl = URL.createObjectURL(blob)
const anchor = document.createElement('a')
anchor.href = downloadUrl
anchor.download = decodeURIComponent(fileName)
anchor.click()
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 => {
// 处理下载完成的文件
})注意事项
- 跨域问题需要后端配置CORS
- 某些浏览器可能限制自动下载行为
- 移动端浏览器对下载的支持可能有差异
- 大文件下载建议提供进度提示
服务端配合 后端应正确设置响应头：
Content-Type: application/octet-stream
Content-Disposition: attachment; filename="filename.ext"
