vue項目實現(xiàn)文件下載進(jìn)度條功能

更新時間：2021年09月23日 09:41:21 作者：coder__wang

這篇文章主要介紹了vue項目實現(xiàn)文件下載進(jìn)度條功能,本文通過具體實現(xiàn)代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

平時業(yè)務(wù)中下載文件方式常見的有倆種：

第一種，直接訪問服務(wù)器的文件地址，自動下載文件；

第二種，服務(wù)器返回blob文件流，再對文件流進(jìn)行處理和下載。

一般小文件適用于第一種下載方案，不占用過多服務(wù)器資源，而對于體積龐大的文件，常常使用文件流的方式進(jìn)行傳輸，如圖：

文件流傳輸成功后通過代碼可以立即發(fā)起瀏覽器下載該文件流：

這種方式也有弊端，在文件流傳輸過程中，用戶無法感知文件流的傳輸狀態(tài)（進(jìn)度），會造成一些困擾（無法確定當(dāng)前下載操作是否已經(jīng)生效）。針對這種情況，我們可以在頁面顯示文件流的狀態(tài)和傳輸進(jìn)度，提高頁面交互性和友好性。

接下來是具體實現(xiàn)：

封裝js方法：

/**
 * @param {Object} data: {url: 文件地址, download: 文件名稱}
 */
export function downLoadAll(data) {
  let downProgress = {};
  let uniSign = new Date().getTime() + ''; // 可能會連續(xù)點擊下載多個文件，這里用時間戳來區(qū)分每一次下載的文件
  axios.get(
    data.url, 
    { responseType: 'blob', headers: { "Content-Type": "application/json; charset=utf-8" },
    onDownloadProgress (progress) {
      downProgress = Math.round(100 * progress.loaded / progress.total) // progress對象中的loaded表示已經(jīng)下載的數(shù)量，total表示總數(shù)量，這里計算出百分比
      store.commit('caseInformation/SET_PROGRESS', {path: uniSign, 'progress': downProgress}) // 將此次下載的文件名和下載進(jìn)度組成對象再用vuex狀態(tài)管理
    }}).then( (res)=>{ // 文件流傳輸完成后，開啟文件下載
      if(data.downLoad){
        jsFileDownload(res.data,data.downLoad+'.'+data.url.replace(/.+\./,"")); // jsFileDownLoad是用來下載文件流的，下載插件：npm i js-file-download，import引入：import jsFileDownLoad from 'js-file-download'
      } else {
        jsFileDownload(res.data, data.url.split('/')[data.url.split('/').length-1]);
      }
  }).catch((e)=>{
    this.$message.error('該文件無法下載')
  })
}

store中的caseInfomation.js：

...

const state = {
  progressList: [], // 文件下載進(jìn)度列表
  ...
}

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

頁面顯示進(jìn)度彈框代碼，downLoadNotice.vue：

<template>

</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: 'downLoadNotice',
    computed: {
      ...mapState({
      'progressList': state => state.caseInformation.progressList
    })
    },
    data() {
      return {
        notify: {} // 用來維護下載文件進(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)) { // 如果頁面已經(jīng)有該進(jìn)度對象的彈框，則更新它的進(jìn)度progress
              domList.find(i => i.className == item.path).innerHTML = item.progress + '%'
            } else {
              if (item.progress === null) { // 此處容錯處理，如果后端傳輸文件流報錯，刪除當(dāng)前進(jìn)度對象
                this.$store.commit('caseInformation/DEL_PROGRESS', item.path)
                return
              }// 如果頁面中沒有該進(jìn)度對象所對應(yīng)的彈框，頁面新建彈框，并在notify中加入該彈框?qū)ο?，屬性名為該進(jìn)度對象的path(上文可知path是唯一的)，屬性值為$notify(element ui中的通知組件)彈框?qū)ο?
              this.notify[item.path] = this.$notify.success({
                // title: 'Info',
                dangerouslyUseHTMLString: true,
                message: `<p style="width: 100px;">正在下載<span class="${item.path}" style="float: right">${item.progress}%</span></p>`, // 顯示下載百分比，類名為進(jìn)度對象的path(便于后面更新進(jìn)度百分比)
                showClose: false,
                duration: 0
              })
            }
            console.log(item.progress + '%', '-------------------------->')

            if (item.progress == 100) { // 如果下載進(jìn)度到了100%，關(guān)閉該彈框，并刪除notify中維護的彈框?qū)ο?
              this.notify[item.path].close()
              // delete this.notify[item.path] 上面的close()事件是異步的，這里直接刪除會報錯，利用setTimeout，將該操作加入異步隊列
              setTimeout(() => {
                delete this.notify[item.path]
              }, 1000)
              this.$store.commit('caseInformation/DEL_PROGRESS', item.path)// 刪除caseInformation中state的progressList中的進(jìn)度對象
            }
          })
        },
        deep: true
      }
    }
  }
</script>

<style scoped>

</style>

以上代碼我們可以封裝到mixins文件夾中，在頁面內(nèi)用mixins混入：

頁面中觸發(fā)下載操作：

downLoad(item){
   let downData = {
      url: `ipdoc${item.url}`,
      downLoad: item.fileName
   }
   this.$commonUtils.downLoadAll(downData) // 下載
},

最終頁面的效果：