美文网首页
vue axios 下载文件 onDownloadProgres

vue axios 下载文件 onDownloadProgres

作者: flyjar | 来源:发表于2020-12-30 15:19 被阅读0次
    this.$http({
            url: this.$http.adornUrl("/fixedAssets/exportData"),
            method: "get",
            responseType: "blob",
            params: this.$http.adornParams(this.ajaxSeachData),
            timeout:1000 * 30000,
            onDownloadProgress: (evt) => {
            
             // 有时候拿不到total值,这个值总是为0
            //只要设置后台的代码  response.setContentLengthLong(文件长度); 就可以了
              alert(evt.total);
    
              this.percentage = parseInt(
                (evt.loaded / evt.total) * 100
              );
              if(this.percentage==100){
                this.progressSuccess='success';
              }
            },
          }).then(({ data }) => {
    
            this.showDownload = false;
            this.downLoadDialogVisible=false;
    
            if (data.code == 500) {
              this.$message.error(data.msg);
            } else {
              const blob = new Blob([data], {
                type: "application/octet-stream; charset=utf-8",
              });
              //对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
              //IE10以上支持blob但是依然不支持download
              if ("download" in document.createElement("a")) {
                //支持a标签download的浏览器
                var fileName="IT固定资产"+this.getNowTimeStr()+".xls";
                const link = document.createElement("a"); //创建a标签
                link.download = fileName; //a标签添加属性
                link.style.display = "none";
                link.href = URL.createObjectURL(blob);
                document.body.appendChild(link);
                link.click(); //执行下载
                URL.revokeObjectURL(link.href); //释放url
                document.body.removeChild(link); //释放标签
              } else {
                //其他浏览器
                navigator.msSaveBlob(blob, fileName);
              }
            }
          });
    

    相关文章

      网友评论

          本文标题:vue axios 下载文件 onDownloadProgres

          本文链接:https://www.haomeiwen.com/subject/arkinktx.html