zoukankan      html  css  js  c++  java
  • axios 如何获取下载文件的进度条

    exportFun(){
            let _that = this
            const instance = this.axios.create({
              onDownloadProgress: function(ProgressEvent) {
                const load = ProgressEvent.loaded;
                const total = ProgressEvent.total;
                const progress = (load / total) * 100;
                console.log(progress);
                bar.style.width=(progress) + "%";
                $("#total").html( Math.floor(progress) + "%")
                if(progress == 100){
                  _that.$emit('exportDataFun',this.needData)
                  _that.isDownLoad = false
                }
              } 
            });
            let ajaxUrl,fileName
            if(this.isCanClick){
              let _that =this
              _that.isCanClick = false
              instance({
                url: ajaxUrl,
                method: "post",
                data: this.needData,
                responseType: "blob" //application/octet-stream
              }).then(res => {
                const data = res.data
                  let r = new FileReader()
                  r.onload = function () {
                    try {
                      let resData = JSON.parse(this.result)
                      console.log(resData)
                      if (resData && resData['code'] && resData['code'] != '1000') {
                        _that.$Message.info(resData.msg);
                        _that.isDownLoad = false
                      }
                    } catch (err) {
                      // 兼容ie11
                      if (window.navigator.msSaveOrOpenBlob) {
                        try {
                          const blobObject = new Blob([data])
                          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
                        } catch (e) {
                          console.log(e)
                        }
                        return
                      }
                      this.download(data, fileName)
                      alert('导出成功')
                    }
                  }
                  r.readAsText(data) // FileReader的API
              }).catch(e => {
                let msg = "网络异常";
                alert(msg);
              });
  • 相关阅读:
    第19 章 : 调度器的调度流程和算法介绍
    第18 章 : Kubernetes 调度和资源管理
    关于一次配合开发工作而产生的服务器内核参数问题(Android 网络问题)
    第17 章 : 深入理解 etcd:etcd 性能优化实践
    第16 章 : 深入理解 etcd:基于原理解析
    第15 章 : 深入解析 Linux 容器
    第14 章 : Kubernetes Service讲解
    第13 章 : Kubernetes 网络概念及策略控制
    第12 章 : 可观测性-监控与日志
    第11 章 : 可观测性:你的应用健康吗?(liveness和readiness)
  • 原文地址:https://www.cnblogs.com/jiajiamiao/p/11607791.html
Copyright © 2011-2022 走看看