vue elementui 大文件进度条下载

下载进度条

javascript 复制代码
<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>

下载方法

javascript 复制代码
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();
},
css 复制代码
.box-card {
  position: fixed;
  right: 20px;
  top: 100px;
  width: 300px;
  font-size: 12px;
}
相关推荐
JefferyXZF16 分钟前
Next.js 初识:从 React 到全栈开发的第一步(一)
前端·全栈·next.js
一只韩非子1 小时前
AI时代,程序员如何优雅地搞定页面设计?
前端·ai编程
新中地GIS开发老师1 小时前
2025Mapbox零基础入门教程(14)定位功能
前端·javascript·arcgis·gis·mapbox·gis开发·地理信息科学
tager1 小时前
Vue 3 组件开发中的"双脚本"困境
前端·vue.js·代码规范
烛阴2 小时前
Int / Floor
前端·webgl
excel2 小时前
使用 PWA 时,为什么你必须手动添加更新逻辑,否则会报错?
前端
Moment2 小时前
Node.js 这么多后端框架,我到底该用哪个?🫠🫠🫠
前端·后端·node.js
尚学教辅学习资料2 小时前
SpringBoot3.x入门到精通系列: 2.3 Web开发基础
前端·springboot·web开发
han_3 小时前
前端遇到页面卡顿问题,如何排查和解决?
前端·javascript·性能优化
拾光拾趣录4 小时前
H5适配9大高频题连环炸!第3问90%人翻车?
前端·面试