Vue文件下載進度條的實現過程

downFileProgress: function (url, params, headers, blenderApiUrl, callback, uniSign) {
   return axios({
     url: url,
     params: params,
     method: 'get',
     responseType: 'blob',
     baseURL: blenderApiUrl,
     headers: headers,
     onDownloadProgress (progress) {
       callback(progress, uniSign)
     }
   })
 }

downOrgFile (row) {
  let uniSign = `${new Date().getTime()} ` // 可能會連續點擊下載多個文件，這裡用時間戳來區分每一次下載的文件
  const url = `${this.$api.LifeInsuranceScenario2DownFile}/${row.account_name}/${row.task_id}`
  const baseUrl = this.iframeData.blenderApiUrl
  this.$http.downFileProgress(url, {}, this.headers, baseUrl, this.callBackProgress, uniSign).then(res => {
    if (!res) {
      this.$sweetAlert.errorWithTimer('文件下載失敗！')
      return
    }
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      window.navigator.msSaveBlob(new Blob([res.data]), '中間項下載.zip')
    } else {
      let url = window.URL.createObjectURL(new Blob([res.data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', 'xxx.zip')
      document.body.appendChild(link)
      link.click()
      link.remove()
    }
  })
},
callBackProgress (progress, uniSign) {
  let total = progress.srcElement.getResponseHeader('Real-Content-Length')
  // progress對象中的loaded表示已經下載的數量，total表示總數量，這裡計算出百分比
  let downProgress = Math.floor((progress.loaded / total) * 100)
  // 將此次下載的文件名和下載進度組成對象再用vuex狀態管理
  this.$store.commit('SET_PROGRESS', { path: uniSign, progress: downProgress })
}

import { mapState } from 'vuex'
export const mixins = {
  computed: {
    ...mapState({
      progressList: state => state.progressList
    })
  },
  data () {
    return {
      notify: {} // 用來維護下載文件進度彈框對象
    }
  },
  watch: {
    // 監聽進度列表
    progressList: {
      handler (n) {
        let data = JSON.parse(JSON.stringify(n))
        data.forEach(item => {
          const domList = [...document.getElementsByClassName(item.path)]
          if (domList.find(i => i.className === item.path)) {
            // 如果頁面已經有該進度對象的彈框，則更新它的進度progress
            if (item.progress) domList.find(i => i.className === item.path).innerHTML = item.progress + '%'
            if (item.progress === null) {
              // 此處容錯處理，如果後端傳輸文件流報錯，刪除當前進度對象
              this.$store.commit('DEL_PROGRESS', item.path)
              this.$notify.error({ title: '錯誤', message: '文件下載失敗！' })
            }
          } else {
            // 如果頁面中沒有該進度對象所對應的彈框，頁面新建彈框，並在notify中加入該彈框對象，屬性名為該進度對象的path(上文可知path是唯一的)，屬性值為$notify(element ui中的通知組件)彈框對象
            this.notify[item.path] = this.$notify.success({
              dangerouslyUseHTMLString: true,
              customClass: 'progress-notify',
              message: `<p style="width: 150px;line-height: 13px;">中間項正在下載<span class="${item.path}" style="float: right">${item.progress}%</span></p>`, // 顯示下載百分比，類名為進度對象的path(便於後面更新進度百分比)
              showClose: true,
              duration: 0
            })
          }
          if (item.progress === 100) {
            // 如果下載進度到瞭100%，關閉該彈框，並刪除notify中維護的彈框對象
            // this.notify[item.path].close()
            // 上面的close()事件是異步的，直接delete this.notify[item.path]會報錯，利用setTimeout，將該操作加入異步隊列
            setTimeout(() => {
              delete this.notify[item.path]
            }, 1000)
            this.$store.commit('DEL_PROGRESS', item.path) // 刪除caseInformation中state的progressList中的進度對象
          }
        })
      },
      deep: true
    }
  }
}

import { mixins } from '../mixin/index'
export default {
  mixins: [mixins],
  ......
}

const state = {
  progressList: []
}
export default state

const mutations = {
  SET_PROGRESS: (state, progressObj) => {
    // 修改進度列表
    if (state.progressList.length) {
      // 如果進度列表存在
      if (state.progressList.find(item => item.path === progressObj.path)) {
        // 前面說的path時間戳是唯一存在的，所以如果在進度列表中找到當前的進度對象
        state.progressList.find(item => item.path === progressObj.path).progress = progressObj.progress
        // 改變當前進度對象的progress
      }
    } else {
      // 當前進度列表為空，沒有下載任務，直接將該進度對象添加到進度數組內
      state.progressList.push(progressObj)
    }
  },
  DEL_PROGRESS: (state, props) => {
    state.progressList.splice(state.progressList.findIndex(item => item.path === props), 1) // 刪除進度列表中的進度對象
  },
  CHANGE_SETTING: (state, { key, value }) => {
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}

export default mutations

export const getProgressList = state => state.progressList

export const changeSetting = function ({ commit }, data) {
  commit('CHANGE_SETTING', data)
}
export const setprogress = function ({ commit }, data) {
  commit('SET_PROGRESS', data)
}
export const delprogress = function ({ commit }, data) {
  commit('DEL_PROGRESS', data)
}