vue文件下载怎么实现
Vue 文件下载实现方法
使用 <a> 标签下载
通过创建隐藏的 <a> 标签并设置 download 属性实现文件下载：
<template>
<button @click="downloadFile">下载文件</button>
</template>
<script>
export default {
methods: {
downloadFile() {
const link = document.createElement('a')
link.href = '文件URL或Blob对象'
link.download = '文件名.扩展名'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}
}
</script>使用 Blob 对象下载
当需要从API获取文件数据时，可以使用Blob对象：
axios.get('文件API地址', { responseType: 'blob' })
.then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = url
link.download = '文件名.扩展名'
document.body.appendChild(link)
link.click()
window.URL.revokeObjectURL(url)
document.body.removeChild(link)
})使用 FileSaver.js 库
安装 FileSaver 库简化下载流程：
npm install file-saver使用示例：
import { saveAs } from 'file-saver'
// 从URL下载
saveAs('文件URL', '文件名.扩展名')
// 从Blob下载
axios.get('文件API地址', { responseType: 'blob' })
.then(response => {
saveAs(response.data, '文件名.扩展名')
})处理大文件分块下载
对于大文件，可以实现分块下载：
async function downloadLargeFile(url, fileName) {
const response = await fetch(url)
const reader = response.body.getReader()
const contentLength = +response.headers.get('Content-Length')
let receivedLength = 0
const chunks = []
while(true) {
const { done, value } = await reader.read()
if(done) break
chunks.push(value)
receivedLength += value.length
console.log(`下载进度: ${(receivedLength/contentLength*100).toFixed(2)}%`)
}
const blob = new Blob(chunks)
saveAs(blob, fileName)
}服务端配合实现
Node.js 服务端示例（Express）：
router.get('/download', (req, res) => {
const filePath = '/path/to/file'
res.download(filePath, '自定义文件名.ext', (err) => {
if(err) console.error('下载出错', err)
})
})注意事项
- 跨域问题需确保服务器配置正确的CORS头
- 大文件下载应考虑进度提示和取消功能
- 移动端可能需要特殊处理某些文件类型
- 文件名编码问题需注意处理特殊字符
以上方法覆盖了Vue项目中常见的文件下载场景，可根据具体需求选择合适方案。
