vue前端实现下载进度
实现下载进度的方法
在Vue前端中实现下载进度，通常需要结合XMLHttpRequest或fetch API来监听下载进度事件。以下是几种常见的实现方式：
使用XMLHttpRequest监听进度
XMLHttpRequest对象提供了progress事件，可以实时获取下载进度。
downloadFile(url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.addEventListener('progress', (event) => {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
console.log(`下载进度: ${percentComplete}%`);
// 更新Vue组件中的进度状态
this.downloadProgress = percentComplete;
}
});
xhr.onload = () => {
if (xhr.status === 200) {
const blob = new Blob([xhr.response]);
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'filename.ext';
link.click();
}
};
xhr.send();
}使用fetch API和ReadableStream
fetch API本身不直接提供进度事件，但可以通过ReadableStream实现类似功能。
async downloadWithProgress(url) {
const response = await fetch(url);
const reader = response.body.getReader();
const contentLength = +response.headers.get('Content-Length');
let receivedLength = 0;
let chunks = [];
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
receivedLength += value.length;
const progress = (receivedLength / contentLength) * 100;
console.log(`下载进度: ${progress}%`);
this.downloadProgress = progress;
}
const blob = new Blob(chunks);
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'filename.ext';
link.click();
}使用axios实现下载进度
axios提供了onDownloadProgress回调函数，可以方便地获取下载进度。
axios({
url: '/file/download',
method: 'GET',
responseType: 'blob',
onDownloadProgress: (progressEvent) => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
console.log(`下载进度: ${percentCompleted}%`);
this.downloadProgress = percentCompleted;
}
}).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();
});在Vue组件中显示进度条
在Vue模板中，可以使用进度条组件来直观显示下载进度。
<template>
<div>
<button @click="downloadFile">下载文件</button>
<progress :value="downloadProgress" max="100"></progress>
<span>{{ downloadProgress }}%</span>
</div>
</template>
<script>
export default {
data() {
return {
downloadProgress: 0
}
},
methods: {
// 使用上述任一方法实现下载功能
}
}
</script>注意事项
- 确保服务器正确设置了Content-Length头部，否则无法计算准确的进度
- 跨域请求可能需要服务器配置CORS头部
- 大文件下载建议使用分块下载或断点续传技术
- 下载完成后及时释放创建的ObjectURL，避免内存泄漏
这些方法都可以在Vue项目中实现文件下载进度显示，选择哪种方式取决于项目具体需求和使用的HTTP库。
