VUE+element UI 纯前端大文件下载百分比进度条

纯前端展示

如有优化解决方法 可在此基础上实现真实下载进度展示 axios

展示

el组件

 <!-- 下载进度条 -->
    <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"
          width="60"
        ></el-progress>
      </div>
    </el-dialog>

date

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

methods

 getRandom(min, max) {
      //根据最小值和最大值产生一个随机数
      return Math.round(Math.random() * (max - min) + min);
    },
    downFile(row) {
      //这里放参数
      var param = {
      };
      this.fileDown.loadDialogStatus = true;
      let culPer = window.setInterval(() => {
        let per = this.fileDown.percentage;
        console.log("当前下载进度：" + per);
        if (per > 78) {
          this.filePercentage = 99;
          return;
        }
        let addNum = this.getRandom(10, 20);
        this.fileDown.percentage = per + addNum;
      }, 1000);
        //axios 
      axios({
        method: "get",
        withCredentials: true,
        url: "XXXXXX/XXXX/XXXX",
        params: param,
        responseType: "blob",
      })
        .then((res) => {
          console.info(res);
          const content = res.data;
          if (content.size == 0) {
            this.loadClose();
            this.$alert("下载失败");
            return;
          }
          const blob = new Blob([content]);
          const fileName = "文件名.zip"; //替换文件名
          window.clearInterval(culPer); //去掉定时器
          this.fileDown.loadDialogStatus = false;//关闭弹窗
          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);
        });
    },

参考: VUE+ElementUI实现下载进度提示_蓝天⊙白云的博客-CSDN博客 ,,vue + element-ui + springboot 实现文件下载进度条展现功能_springboot vue 进度条_清泉流响、的博客-CSDN博客