下载进度条

<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;
}