Vue+element+springboot でファイルダウンロードの進行状況バー表示機能を実装する例

<!--ダウンロード進捗バー-->
    <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 スロット="フッター" クラス="ダイアログ フッター">
        <el-button type="primary" @click="downClose">ダウンロードをキャンセル</el-button>
      </div>  
    </el-ダイアログ>

ファイルダウン: {
        loadDialogStatus: false, // ポップアップ ボックス コントロールのステータス percentage: 0, // 進行状況バーのパーセンテージ source: {}, // ダウンロード リソース オブジェクトのキャンセル },

ダウンファイル(行) {
    //ここにパラメータを入力します var param = {};
    this.fileDownloadDialogStatus = true; です。
    this.fileDown.percentage = 0;
    定数インスタンス = this.initInstance();
    実例（{
        メソッド: "post",
        資格情報: true、
        url: "ダウンロードアドレスを置き換える",
        パラメータ: パラメータ、
        レスポンスタイプ: "blob"
    }).then(res => {
        this.fileDown.loadDialogStatus = false;
        コンソール.info(res);
        定数コンテンツ = res.data;
        コンテンツサイズが0の場合
          this.loadClose();
          this.$alert("ダウンロードに失敗しました");
          戻る ;
        }
        const blob = 新しい Blob([コンテンツ]);
        const fileName = row.fileName; //ファイル名を置き換えます if ("download" in document.createElement("a")) {
          // IE 以外のダウンロード const elink = document.createElement("a");
          elink.download = ファイル名;
          elink.style.display = "なし";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          setTimeout(関数() {
            URL.revokeObjectURL(elink.href); // URL オブジェクトを解放します document.body.removeChild(elink);
          }, 100);
        } それ以外 {
          // IE10+ ダウンロード navigator.msSaveBlob(blob, fileName);
        }
      }).catch(エラー => {
          this.fileDown.loadDialogStatus = false;
          console.info(エラー);
      });
  },
インスタンスの初期化() {
      var _this = これ;
      //キャンセル用のリソース トークン this.fileDown.source = axios.CancelToken.source();
      const instance = axios.create({ //axios オブジェクトは事前にインポートするか、グローバルに定義された onDownloadProgress: function(ProgressEvent) に置き換える必要があります {
          ProgressEvent をロードします。
          ProgressEvent の戻り値は 0 です。
          const 進捗状況 = (負荷 / 合計) * 100;
          console.log('進行状況='+進行状況);
          // 計算は既に開始時に行われています。続行するには、前回の計算を超える必要があります if (progress > _this.fileDown.percentage) {
            _this.fileDown.percentage = Math.floor(進行状況);
          }
          進捗状況が100の場合
            //ダウンロードが完了しました_this.fileDown.loadDialogStatus = false;
          }
        },
        cancelToken: this.fileDown.source.token, //キャンセルリクエストトークンを宣言する
      });
      インスタンスを返します。
    },
    ダウンクローズ() {
      //ダウンロードを中断します this.$confirm("[閉じる] をクリックするとダウンロードが中断されます。閉じてもよろしいですか?", this.$t("button.tip"), {
        確認ボタンテキスト: this.$t("button.confirm"),
        キャンセルボタンテキスト: this.$t("button.cancel"),
        タイプ: 「警告」
      }).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();
その後の省略...