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

纯前端展示

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

展示

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

el组件

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博客

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/e5f99a748d.html