vue elementui 大文件进度条下载

下载进度条

1. <el-card class="box-card" v-if="downloadProgress > 0">
2.         <div>正在下载文件...</div>
3.         <el-progress :text-inside="true" :stroke-width="26" :percentage="downloadProgress" status="success"></el-progress>
4. </el-card>

复制代码

下载方法

1. downloadFile(row) {
2.    const xhr = new XMLHttpRequest();
3.    xhr.open('GET', row.certificatePdf, true);
4.    xhr.responseType = 'blob';
6.    // 监听下载进度
7.    xhr.onprogress = (event) => {
8.        if (event.lengthComputable) {
9.            this.downloadProgress = Math.floor((event.loaded / event.total) * 100);
10.        }
11.    };
13.    // 下载完成
14.    xhr.onload = () => {
15.        if (xhr.status === 200) {
16.            const blob = xhr.response;
17.            const link = document.createElement('a');
18.            link.href = window.URL.createObjectURL(blob);
19.            link.download = row.certificateName + '.pdf';
20.            document.body.appendChild(link);
21.            link.click();
22.            document.body.removeChild(link);
23.            this.downloadProgress = 0; // 重置进度条
24.        }
25.    };
27.    // 错误处理
28.    xhr.onerror = () => {
29.        console.error('下载失败');
30.        this.downloadProgress = 0; // 重置进度条
31.    };
33.    xhr.send();
34. },

复制代码

2. .box-card {
3.   position: fixed;
4.   right: 20px;
5.   top: 100px;
6.   width: 300px;
7.   font-size: 12px;
8. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。