vue页面上有一个需求,点击文件的名称就能自动弹出浏览器那个保存文件的窗口,然后选好下载路径,文件就会下载,进度显示在浏览器的左下角(我的Chrome是这样的)
但是感觉不太直观,万一客户没看到重复点击,浏览器的窗口会一直弹出,影响使用感受,所以添加一个进度条,查了一下element-ui里面有个el-progress,使用了,但是有几个对于小菜来说的难点
思路是点击文件——浏览器弹出窗口,选择保存路径,点击保存——页面中间出现实时进度条,下载期间不能进行其他操作,下载后有个类似于message的弹窗提示“文件下载完成”
进度条的出现设定了一个变量showProgress,点击下载的时候等于true,下载完毕关闭弹窗,每次点开的时候都是false,但是现在进度条比浏览器的窗口出来的快,这个是要用到异步axios吗?
怎么才能让进度条最后出现呢?怎么让文件的下载跟进度条同步呢??
请教一下各位!
![](https://profile-avatar.csdnimg.cn/a53d9e81ef4a4f4487257a0f177ef8d2_bianchengmaori.jpg!4)
vue进度条异步请求
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- supervillain2 2023-06-08 17:24关注
<template> <div> <button @click="downloadFile">下载文件</button> <el-progress v-if="showProgress" :percentage="progress" :status="progressStatus"></el-progress> </div> </template> <script> import axios from 'axios'; import { ElMessage } from 'element-plus'; export default { data() { return { showProgress: false, progress: 0, progressStatus: 'success', } }, methods: { downloadFile() { this.showProgress = true; axios({ url: 'url_to_your_file', method: 'GET', responseType: 'blob', // This is important onDownloadProgress: (progressEvent) => { // Calculate the percentage this.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total); }, }) .then((response) => { // Create a blob link const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'file_name'); document.body.appendChild(link); link.click(); // Notify the user ElMessage.success('文件下载完成!'); this.showProgress = false; }) .catch((error) => {
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录
悬赏问题
- ¥15 VScode中运行python的input代码为啥一直报错啊,求解答
- ¥50 rk3588板端推理
- ¥50 opencv怎么去掉 数字0中间的斜杠。
- ¥15 这种情况的伯德图和奈奎斯特曲线怎么分析?
- ¥50 paddleocr带斜线的0很容易识别成9
- ¥15 电子档案元素采集(tiff及PDF扫描图片)
- ¥15 flink-sql-connector-rabbitmq使用
- ¥15 zynq7015,PCIE读写延时偏大
- ¥15 使用spss做psm(倾向性评分匹配)遇到问题
- ¥20 vue+UEditor附件上传问题