Vue プロジェクトはファイルダウンロードの進行状況バー機能を実装します

/**
 * @param {Object} データ: {url: ファイルアドレス、download: ファイル名}
 */
エクスポート関数downLoadAll(data) {
  失望させるProgress = {};
  let uniSign = new Date().getTime() + ''; // クリックすると、複数のファイルを連続してダウンロードできます。ここでは、ダウンロードされた各ファイルを区別するためにタイムスタンプが使用されています axios.get(
    データ.url、 
    { レスポンスタイプ: 'blob'、ヘッダー: { "Content-Type": "application/json; charset=utf-8" },
    onDownloadProgress (進行状況) {
      downProgress = Math.round(100 * progress.loaded / progress.total) // progress オブジェクトの loaded はダウンロードされた量、total は合計量を示します。パーセンテージを計算します herestore.commit('caseInformation/SET_PROGRESS', {path: uniSign, 'progress': downProgress}) // このダウンロードのファイル名とダウンロード進行状況をオブジェクトに結合し、vuex 状態管理を使用します}}).then( (res)=>{ // ファイル ストリームの転送が完了したら、ファイルのダウンロードを開始しますif(data.downLoad){
        jsFileDownload(res.data,data.downLoad+'.'+data.url.replace(/.+\./,"")); // jsFileDownLoad はファイル ストリームをダウンロードするために使用されます。ダウンロード プラグイン: npm i js-file-download、インポート: import jsFileDownLoad from 'js-file-download'
      } それ以外 {
        jsFileDownload(res.data、data.url.split('/')[data.url.split('/').length-1]);
      }
  }).catch((e)=>{
    this.$message.error('ファイルをダウンロードできません')
  })
}

...

定数状態 = {
  progressList: [], // ファイルのダウンロード進行状況リスト...
}

const 変異 = {
  SET_PROGRESS: (state, progressObj)=>{ // 進捗リストを変更する if(state.progressList.length){ // 進捗リストが存在する場合 if(state.progressList.find(item=>item.path == progressObj.path)){ // 上記のパスタイムスタンプは存在する唯一のものなので、進捗リストで現在の進捗オブジェクトを見つけた場合は state.progressList.find(item=>item.path == progressObj.path).progress = progressObj.progress // 現在の進捗オブジェクトの進捗を変更する
      }
    }それ以外{
      state.progressList.push(progressObj) // 現在の進捗リストは空で、ダウンロード タスクはありません。進捗オブジェクトを進捗配列に直接追加します。}
  },
  DEL_PROGRESS: (状態、プロパティ) => {
    state.progressList.splice(state.progressList.findIndex(item=>item.path == props), 1) // 進捗リスト内の進捗オブジェクトを削除します},
  ...
}

<テンプレート>

</テンプレート>

<スクリプト>
  'vuex' から { mapState } をインポートします。

  エクスポートデフォルト{
    名前: 'downLoadNotice',
    計算: {
      ...mapState({
      'progressList': 状態 => state.caseInformation.progressList
    })
    },
    データ（） {
      戻る {
        通知: {} // ダウンロード ファイルの進行状況ポップアップ ボックス オブジェクトを維持するために使用されます}
    },
    watch: { //進行状況リストを監視する progressList: {
        ハンドラ(n) {
          データ = JSON.parse(JSON.stringify(n)) とします。
          データ.forEach(アイテム => {
            const domList = [...document.getElementsByClassName(item.path)]
            if (domList.find(i => i.className == item.path)) { // ページに進捗状況オブジェクトのポップアップボックスがすでにある場合は、その進捗状況を更新します
              domList.find(i => i.className == item.path).innerHTML = item.progress + '%'
            } それ以外 {
              if (item.progress === null) { // ここでフォールトトレランス処理。バックエンド転送ファイルストリームがエラーを報告した場合、現在の進行状況オブジェクトを削除します。this.$store.commit('caseInformation/DEL_PROGRESS', item.path)
                戻る
              }// ページに進捗オブジェクトに対応するポップアップボックスがない場合は、ページに新しいポップアップボックスを作成し、通知するポップアップボックスオブジェクトを追加します。属性名は進捗オブジェクトのパス（前述のように、パスは一意です）、属性値は$notify（要素uiの通知コンポーネント）です。ポップアップボックスオブジェクトthis.notify[item.path] = this.$notify.success({
                // タイトル: '情報',
                危険なHTML文字列を使用する: true、
                メッセージ: `<p style="width: 100px;">ダウンロード中<span class="${item.path}" style="float: right">${item.progress}%</span></p>`, // ダウンロード率を表示します。クラス名は進行状況オブジェクトのパスです (後で進行状況率を更新しやすくするため)
                表示閉じる: false,
                期間: 0
              })
            }
            console.log(item.progress + '%', '-------------------------->')

            if (item.progress == 100) { // ダウンロードの進行状況が100%に達したら、ポップアップウィンドウを閉じて、notifyで保持されているポップアップウィンドウオブジェクトを削除します。this.notify[item.path].close()
              // this.notify[item.path] を削除します。上記の close() イベントは非同期です。ここで直接削除するとエラーが発生します。setTimeout を使用して、操作を非同期キューに追加します。setTimeout(() => {
                this.notify[item.path]を削除します
              }, 1000)
              this.$store.commit('caseInformation/DEL_PROGRESS', item.path) // caseInformation の状態の progressList にある進捗オブジェクトを削除します}
          })
        },
        深い: 本当
      }
    }
  }
</スクリプト>

<スタイルスコープ>

</スタイル>

ダウンロード(アイテム){
   失望させるData = {
      URL: `ipdoc${item.url}`,
      ダウンロード: item.fileName
   }
   this.$commonUtils.downLoadAll(downData) // ダウンロード},