<!--下載進度條-->
    <el-dialog title="正在下載，請等待" :visible.sync="fileDown.loadDialogStatus" :close-on-click-modal="false" 
      :close-on-press-escape="false" :show-close="false" width="20%">
      <div style="text-align: center;">
        <el-progress type="circle" :percentage="fileDown.percentage"></el-progress>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downClose">取消下載</el-button>
      </div>  
    </el-dialog>

fileDown: {
        loadDialogStatus: false, //彈出框控制的狀態(tài)
        percentage: 0, //進度條的百分比
        source: {}, //取消下載時的資源對象
      },

downFile(row) {
    //這里放參數(shù)
    var param = {};
    this.fileDown.loadDialogStatus = true;
    this.fileDown.percentage = 0;
    const instance = this.initInstance();
    instance({
        method: "post",
        withCredentials: true,
        url: "替換下載地址",
        params: param,
        responseType: "blob"
    }).then(res => {
        this.fileDown.loadDialogStatus = false;
        console.info(res);
        const content = res.data;
        if (content.size == 0) {
          this.loadClose();
          this.$alert("下載失敗");
          return ;
        }
        const blob = new Blob([content]);
        const fileName = row.fileName;//替換文件名
        if ("download" in document.createElement("a")) {
          // 非IE下載
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          setTimeout(function() {
            URL.revokeObjectURL(elink.href); // 釋放URL 對象
            document.body.removeChild(elink);
          }, 100);
        } else {
          // IE10+下載
          navigator.msSaveBlob(blob, fileName);
        }
      }).catch(error => {
          this.fileDown.loadDialogStatus = false;
          console.info(error);
      });
  },
initInstance() {
      var _this = this;
      //取消時的資源標記
      this.fileDown.source = axios.CancelToken.source();
      const instance = axios.create({ //axios 這個對象要提前導入 或者替換為你們全局定義的
        onDownloadProgress: function(ProgressEvent) {
          const load = ProgressEvent.loaded;
          const total = ProgressEvent.total;
          const progress = (load / total) * 100;
          console.log('progress='+progress);
          //一開始已經在計算了 這里要超過先前的計算才能繼續(xù)往下
          if (progress > _this.fileDown.percentage) {
            _this.fileDown.percentage = Math.floor(progress);
          }
          if(progress == 100){
            //下載完成
            _this.fileDown.loadDialogStatus = false;
          }
        },
        cancelToken: this.fileDown.source.token,//聲明一個取消請求token
      });
      return instance;
    },
    downClose() {
      //中斷下載
      this.$confirm("點擊關閉后將中斷下載，是否確定關閉？", this.$t("button.tip"), {
        confirmButtonText: this.$t("button.confirm"),
        cancelButtonText: this.$t("button.cancel"),
        type: "warning"
      }).then(() => {
          //中斷下載回調
          this.fileDown.source.cancel('log==客戶手動取消下載');
      }).catch(() => {
          //取消--什么都不做
      });      
    },

//獲取本地文件 并計算大小
File file = new File(zipFileName);//讀取壓縮文件
InputStream inputStream = new FileInputStream(file);
int totalSize = inputStream.available(); //獲取文件大小
logger.info("壓縮后===當前文件下載大小size={}", totalSize);
response.setHeader("Content-Length", totalSize+"");//這里注意 一定要在response.getOutputStream()之前就把這個setHeader屬性設進去，否則也不生效
OutputStream out = response.getOutputStream();
后續(xù)省略.....