这篇文章给大家介绍了“vue框架中怎么制作圆形下载进度条”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

本文主要介绍了vue+element+springboot实现文件下载进度条展现功能示例，分享给大家，具体如下

最终效果图

1. 需求背景

最近接到一个优化需求，原系统文件下载功能体验不友好，特别是下载一些比较耗时的文件，用户在页面上傻等不知道下载的进度是怎么样的，总以为是系统卡死了。

2. 优化方案

后台优化下载速度（可以研究一下分片下载，这里不做展开）
改造前端用户体验（比如点击下载后你要显示出来进度，让客户知道已经在下载中了）

3. 具体实现

这里选择了2.2中的方案，改造前端用户体验，写这篇文章的目的是记录当时的解决过程，希望能帮到大家；本文使用的方案技术背景：前端 vue + element-ui，后台：springboot 前后端分离，废话不多说，直接上代码;

3.1 前端代码

1.定义一个弹出层(样式各位看官根据自己的喜好来)

<!--下载进度条-->
    <el-dialog title="正在下载，请等待" :visible.sync="fileDown.loadDialogStatus" :close-on-click-modal="false" 
      :close-on-press-escape="false" :show-close="false" width="20%">
      <div style="text-align: center;">
        <el-progress type="circle" :percentage="fileDown.percentage"></el-progress>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downClose">取消下载</el-button>
      </div>  
    </el-dialog>

在data()中定义一个对象

fileDown: {
        loadDialogStatus: false, //弹出框控制的状态
        percentage: 0, //进度条的百分比
        source: {}, //取消下载时的资源对象
      },

3.主要方法(注意替换下面的参数，后台地址、文件名等)

downFile(row) {
    //这里放参数
    var param = {};
    this.fileDown.loadDialogStatus = true;
    this.fileDown.percentage = 0;
    const instance = this.initInstance();
    instance({
        method: "post",
        withCredentials: true,
        url: "替换下载地址",
        params: param,
        responseType: "blob"
    }).then(res => {
        this.fileDown.loadDialogStatus = false;
        console.info(res);
        const content = res.data;
        if (content.size == 0) {
          this.loadClose();
          this.$alert("下载失败");
          return ;
        }
        const blob = new Blob([content]);
        const fileName = row.fileName;//替换文件名
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          setTimeout(function() {
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          }, 100);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      }).catch(error => {
          this.fileDown.loadDialogStatus = false;
          console.info(error);
      });
  },
initInstance() {
      var _this = this;
      //取消时的资源标记
      this.fileDown.source = axios.CancelToken.source();
      const instance = axios.create({ //axios 这个对象要提前导入 或者替换为你们全局定义的
        onDownloadProgress: function(ProgressEvent) {
          const load = ProgressEvent.loaded;
          const total = ProgressEvent.total;
          const progress = (load / total) * 100;
          console.log('progress='+progress);
          //一开始已经在计算了 这里要超过先前的计算才能继续往下
          if (progress > _this.fileDown.percentage) {
            _this.fileDown.percentage = Math.floor(progress);
          }
          if(progress == 100){
            //下载完成
            _this.fileDown.loadDialogStatus = false;
          }
        },
        cancelToken: this.fileDown.source.token,//声明一个取消请求token
      });
      return instance;
    },
    downClose() {
      //中断下载
      this.$confirm("点击关闭后将中断下载，是否确定关闭？", this.$t("button.tip"), {
        confirmButtonText: this.$t("button.confirm"),
        cancelButtonText: this.$t("button.cancel"),
        type: "warning"
      }).then(() => {
          //中断下载回调
          this.fileDown.source.cancel('log==客户手动取消下载');
      }).catch(() => {
          //取消--什么都不做
      });      
    },

3.2 后台代码

后台主要是要返回计算好的文件大小，否则上面前端计算进度的时候取的total永远是0，这个就是一个隐藏的坑。
关键代码：（下载完整后台网上其实有很多，这里只是列出关键的和需要注意的点）

//获取本地文件 并计算大小
File file = new File(zipFileName);//读取压缩文件
InputStream inputStream = new FileInputStream(file);
int totalSize = inputStream.available(); //获取文件大小
logger.info("压缩后===当前文件下载大小size={}", totalSize);
response.setHeader("Content-Length", totalSize+"");//这里注意 一定要在response.getOutputStream()之前就把这个setHeader属性设进去，否则也不生效
OutputStream out = response.getOutputStream();
后续省略.....

4. 总结

可能大家在使用过程中还会遇到一个问题，就是后端计算文件大小的时候花很多时间，导致前端也是半天进度条不动，用户还是会觉得卡了，这样就达不到我们的诉求了；

这里我这边的解决方案是，前端做一个定时器，点击下载的时候，定时器先跑，比如2秒增加1%的进度，等到后台返回文件总大小的时候，计算出来的百分比（percentage）超过定时器走的百分比（percentage）的时候就关掉定时器，并替换那个进度百分比的属性（percentage）；记住一点，这个定时器自动加百分比（percentage）一定要设一个上限。
好处是用户一点下载按钮，前端就给出反应，虽然前面的反应可能是假的，但是只要衔接好了，真假就无所谓了

到此这篇关于“vue框架中怎么制作圆形下载进度条”的文章就介绍到这了,更多相关vue框架中怎么制作圆形下载进度条内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• jQuery怎样实现文本框字数限制的功能？

  这篇文章给大家分享的是jQuery怎样对文本框字数限制的方法。一般的文本输入框都是有字数限制的，下文我们尝试用jQuery怎样计算输入字数及控制和限制字数，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• 用JS怎样写鼠标移入放大效果，方法是什么

  这篇文章主要为大家详细介绍了js实现鼠标移入图片放大效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• javascript对象比较的方式有哪些？

  这篇文章给大家分享的是有关javascript对象比较的内容，包括引用比较、手动比较、浅层比较和深层比较这四种方式，感兴趣的朋友就继续往下看吧。

• vue项目中封装axios方法是什么？

  本文给大家分享的是关于vue项目中封装axios的内容，对于实现封装axios下面有详细的介绍及示例代码，需要的朋友可以参考，接下来就跟随小编来学习一下吧。

• Vue中v-指令有哪一些，分别怎么使用

  本文以click为例给大家介绍vue.js中常用v-指令，可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript代码，本文通过示例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧