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);
              });
  • 相关阅读:
    vue 集成 vis-network 实现网络拓扑图
    三维空间旋转和Three.JS中的实现
    es6常用新属性(详细整理版)
    css的top和left属性不起作用
    网易云音乐歌单生成外链播放器
    Webstorm常用快捷键备忘
    CPU
    中标麒麟neokylin信息查看
    split分割(拆分)文件
    centos7 安装wps
  • 原文地址:https://www.cnblogs.com/jiajiamiao/p/11607791.html
Copyright © 2011-2022 走看看