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;
}
相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6738 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维