vue elementui 大文件进度条下载功能实现
作者：RW~
本文介绍了如何使用下载进度条来展示下载进度的方法,并展示了相关的效果图,结合实例代码介绍了vue elementui 大文件进度条下载的方法,感兴趣的朋友一起看看吧
效果图展示：
下载进度条
<el-card class="box-card" v-if="downloadProgress > 0"> <div>正在下载文件...</div> <el-progress :text-inside="true" :stroke-width="26" :percentage="downloadProgress" status="success"></el-progress> </el-card>
下载方法
downloadFile(row) {
const xhr = new XMLHttpRequest();
xhr.open('GET', row.certificatePdf, true);
xhr.responseType = 'blob';
// 监听下载进度
xhr.onprogress = (event) => {
if (event.lengthComputable) {
this.downloadProgress = Math.floor((event.loaded / event.total) * 100);
}
};
// 下载完成
xhr.onload = () => {
if (xhr.status === 200) {
const blob = xhr.response;
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = row.certificateName + '.pdf';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
this.downloadProgress = 0; // 重置进度条
}
};
// 错误处理
xhr.onerror = () => {
console.error('下载失败');
this.downloadProgress = 0; // 重置进度条
};
xhr.send();
},.box-card {
position: fixed;
right: 20px;
top: 100px;
width: 300px;
font-size: 12px;
}到此这篇关于vue elementui 大文件进度条下载功能实现的文章就介绍到这了,更多相关vue elementui 进度条下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！