vue文件下载实现
Vue 文件下载实现方法
使用 <a> 标签下载
通过动态创建 <a> 标签实现下载，适用于已知文件 URL 的场景：
const downloadFile = (url, filename) => {
const link = document.createElement('a')
link.href = url
link.download = filename || 'file'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}通过 Blob 对象下载
适用于后端返回二进制流数据的场景：
axios.get('/api/download', { responseType: 'blob' }).then(res => {
const blob = new Blob([res.data])
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = 'filename.ext'
link.click()
window.URL.revokeObjectURL(url)
})使用 FileSaver.js 库
安装 FileSaver 简化下载流程：
npm install file-saver使用示例：
import { saveAs } from 'file-saver'
// 从URL下载
saveAs('https://example.com/file.pdf', 'custom-name.pdf')
// 从Blob下载
const blob = new Blob([data], { type: 'application/octet-stream' })
saveAs(blob, 'filename.ext')处理大文件分片下载
对于大文件可采用分片下载：
const downloadChunked = async (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(`Downloaded ${receivedLength} of ${contentLength}`)
}
const blob = new Blob(chunks)
saveAs(blob, filename)
}添加下载进度提示
结合 axios 的 onDownloadProgress 实现进度显示：
axios.get('/large-file', {
responseType: 'blob',
onDownloadProgress: progressEvent => {
const percent = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
console.log(`Download: ${percent}%`)
}
}).then(res => {
// 处理下载完成逻辑
})服务端配合要求
后端接口需要设置正确的响应头：
Content-Disposition: attachment; filename="example.pdf"
Content-Type: application/octet-stream
