vue文件下载怎么实现
使用 <a> 标签下载文件
在 Vue 中可以通过动态生成 <a> 标签实现文件下载。创建一个隐藏的 <a> 标签，设置 href 为文件 URL 并添加 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>使用 Axios 下载二进制文件
当需要从 API 获取文件时，可以使用 Axios 设置 responseType: '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.js 提供了更简单的文件保存接口，适合处理各种文件类型。
安装依赖：
npm install file-saver使用示例：
import { saveAs } from 'file-saver'
// 保存文本
saveAs(new Blob(['文件内容'], { type: 'text/plain;charset=utf-8' }), '文件名.txt')
// 保存图片
saveAs('https://example.com/image.png', '图片.png')处理大文件分块下载
对于大文件下载，可以实现分块下载并显示进度。
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)
}服务器端设置响应头
确保服务器正确设置了文件下载的响应头：
Content-Disposition: attachment; filename="文件名.扩展名"
Content-Type: application/octet-stream
