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);
              });
  • 相关阅读:
    Spring shiro 初次使用小结
    Spring data Redis
    Redis 学习相关的网站
    Spring依赖注入 — util命名空间配置
    添加至数据库的中文显示问号
    freemarker的classic_compatible设置,解决报空错误
    HTTP协议
    Maven添加本地Jar包
    java中的字符串分割函数
    读取文件方法大全
  • 原文地址:https://www.cnblogs.com/jiajiamiao/p/11607791.html
Copyright © 2011-2022 走看看