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);
          });


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM