Vue文件下載進(jìn)度條的實(shí)現(xiàn)過程

更新時(shí)間：2022年07月05日 09:58:08 作者：高蓓蓓

這篇文章主要介紹了Vue文件下載進(jìn)度條的實(shí)現(xiàn)原理,通過使用onDownloadProgress方法API獲取進(jìn)度及文件大小等數(shù)據(jù)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

需求場(chǎng)景：

1、大文件壓縮過后依舊很大，接口返回response速度過慢，頁(yè)面沒有任何顯示，體驗(yàn)太差。

2、需要在瀏覽器顯示正在加載中的狀態(tài)優(yōu)化顯示，提高用戶體驗(yàn)

實(shí)現(xiàn)原理：

1、使用onDownloadProgress方法API獲取進(jìn)度及文件大小等數(shù)據(jù)

2、mixin混入實(shí)現(xiàn)監(jiān)聽進(jìn)度條進(jìn)度

3、vuex修改進(jìn)度條進(jìn)度

優(yōu)化過程：

使用onDownloadProgress封裝一個(gè)下載文件的方法

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)
     }
   })
 }

在下載文件的地方，使用封裝的方法downFileProgress

downOrgFile (row) {
  let uniSign = `${new Date().getTime()} ` // 可能會(huì)連續(xù)點(diǎn)擊下載多個(gè)文件，這里用時(shí)間戳來區(qū)分每一次下載的文件
  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]), '中間項(xiàng)下載.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對(duì)象中的loaded表示已經(jīng)下載的數(shù)量，total表示總數(shù)量，這里計(jì)算出百分比
  let downProgress = Math.floor((progress.loaded / total) * 100)
  // 將此次下載的文件名和下載進(jìn)度組成對(duì)象再用vuex狀態(tài)管理
  this.$store.commit('SET_PROGRESS', { path: uniSign, progress: downProgress })
}

創(chuàng)建component同等級(jí)mixin文件夾，文件夾創(chuàng)建index.js

import { mapState } from 'vuex'
export const mixins = {
  computed: {
    ...mapState({
      progressList: state => state.progressList
    })
  },
  data () {
    return {
      notify: {} // 用來維護(hù)下載文件進(jìn)度彈框?qū)ο?
    }
  },
  watch: {
    // 監(jiān)聽進(jìn)度列表
    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)) {
            // 如果頁(yè)面已經(jīng)有該進(jìn)度對(duì)象的彈框，則更新它的進(jìn)度progress
            if (item.progress) domList.find(i => i.className === item.path).innerHTML = item.progress + '%'
            if (item.progress === null) {
              // 此處容錯(cuò)處理，如果后端傳輸文件流報(bào)錯(cuò)，刪除當(dāng)前進(jìn)度對(duì)象
              this.$store.commit('DEL_PROGRESS', item.path)
              this.$notify.error({ title: '錯(cuò)誤', message: '文件下載失??！' })
            }
          } else {
            // 如果頁(yè)面中沒有該進(jìn)度對(duì)象所對(duì)應(yīng)的彈框，頁(yè)面新建彈框，并在notify中加入該彈框?qū)ο?，屬性名為該進(jìn)度對(duì)象的path(上文可知path是唯一的)，屬性值為$notify(element ui中的通知組件)彈框?qū)ο?
            this.notify[item.path] = this.$notify.success({
              dangerouslyUseHTMLString: true,
              customClass: 'progress-notify',
              message: `<p style="width: 150px;line-height: 13px;">中間項(xiàng)正在下載<span class="${item.path}" style="float: right">${item.progress}%</span></p>`, // 顯示下載百分比，類名為進(jìn)度對(duì)象的path(便于后面更新進(jìn)度百分比)
              showClose: true,
              duration: 0
            })
          }
          if (item.progress === 100) {
            // 如果下載進(jìn)度到了100%，關(guān)閉該彈框，并刪除notify中維護(hù)的彈框?qū)ο?
            // this.notify[item.path].close()
            // 上面的close()事件是異步的，直接delete this.notify[item.path]會(huì)報(bào)錯(cuò)，利用setTimeout，將該操作加入異步隊(duì)列
            setTimeout(() => {
              delete this.notify[item.path]
            }, 1000)
            this.$store.commit('DEL_PROGRESS', item.path) // 刪除caseInformation中state的progressList中的進(jìn)度對(duì)象
          }
        })
      },
      deep: true
    }
  }
}

下載方法的組件引入mixin

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

Vuex配置進(jìn)度條

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

const mutations = {
  SET_PROGRESS: (state, progressObj) => {
    // 修改進(jìn)度列表
    if (state.progressList.length) {
      // 如果進(jìn)度列表存在
      if (state.progressList.find(item => item.path === progressObj.path)) {
        // 前面說的path時(shí)間戳是唯一存在的，所以如果在進(jìn)度列表中找到當(dāng)前的進(jìn)度對(duì)象
        state.progressList.find(item => item.path === progressObj.path).progress = progressObj.progress
        // 改變當(dāng)前進(jìn)度對(duì)象的progress
      }
    } else {
      // 當(dāng)前進(jìn)度列表為空，沒有下載任務(wù)，直接將該進(jìn)度對(duì)象添加到進(jìn)度數(shù)組內(nèi)
      state.progressList.push(progressObj)
    }
  },
  DEL_PROGRESS: (state, props) => {
    state.progressList.splice(state.progressList.findIndex(item => item.path === props), 1) // 刪除進(jìn)度列表中的進(jìn)度對(duì)象
  },
  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)
}