Vue project implements file download progress bar function

/**
 * @param {Object} data: {url: file address, download: file name}
 */
export function downLoadAll(data) {
  let downProgress = {};
  let uniSign = new Date().getTime() + ''; // You may click to download multiple files in succession. Here, timestamp is used to distinguish each downloaded file axios.get(
    data.url, 
    { responseType: 'blob', headers: { "Content-Type": "application/json; charset=utf-8" },
    onDownloadProgress (progress) {
      downProgress = Math.round(100 * progress.loaded / progress.total) // loaded in the progress object indicates the amount downloaded, and total indicates the total amount. Calculate the percentage herestore.commit('caseInformation/SET_PROGRESS', {path: uniSign, 'progress': downProgress}) // Combine the file name and download progress of this download into an object and use vuex state management}}).then( (res)=>{ // After the file stream transfer is completed, start file downloadif(data.downLoad){
        jsFileDownload(res.data,data.downLoad+'.'+data.url.replace(/.+\./,"")); // jsFileDownLoad is used to download file streams. Download plugin: 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('The file cannot be downloaded')
  })
}

...

const state = {
  progressList: [], // File download progress list...
}

const mutations = {
  SET_PROGRESS: (state, progressObj)=>{ // Modify the progress list if(state.progressList.length){ // If the progress list exists if(state.progressList.find(item=>item.path == progressObj.path)){ // The path timestamp mentioned above is the only one that exists, so if you find the current progress object in the progress list state.progressList.find(item=>item.path == progressObj.path).progress = progressObj.progress // Change the progress of the current progress object
      }
    }else{
      state.progressList.push(progressObj) // The current progress list is empty, there is no download task, directly add the progress object to the progress array}
  },
  DEL_PROGRESS: (state, props) => {
    state.progressList.splice(state.progressList.findIndex(item=>item.path == props), 1) // Delete the progress object in the progress list},
  ...
}

<template>

</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: 'downLoadNotice',
    computed: {
      ...mapState({
      'progressList': state => state.caseInformation.progressList
    })
    },
    data() {
      return {
        notify: {} // Used to maintain the download file progress pop-up box object}
    },
    watch: { //Monitor progress list 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)) { // If the page already has a pop-up box for the progress object, update its progress
              domList.find(i => i.className == item.path).innerHTML = item.progress + '%'
            } else {
              if (item.progress === null) { // Fault tolerance processing here, if the backend transfer file stream reports an error, delete the current progress object this.$store.commit('caseInformation/DEL_PROGRESS', item.path)
                return
              }// If there is no pop-up box corresponding to the progress object on the page, create a new pop-up box on the page and add the pop-up box object to notify. The attribute name is the path of the progress object (as mentioned above, the path is unique), and the attribute value is $notify (notification component in element ui) pop-up box object this.notify[item.path] = this.$notify.success({
                // title: 'Info',
                dangerouslyUseHTMLString: true,
                message: `<p style="width: 100px;">Downloading<span class="${item.path}" style="float: right">${item.progress}%</span></p>`, // Display the download percentage, the class name is the path of the progress object (to facilitate updating the progress percentage later)
                showClose: false,
                duration: 0
              })
            }
            console.log(item.progress + '%', '-------------------------->')

            if (item.progress == 100) { // If the download progress reaches 100%, close the pop-up window and delete the pop-up window object maintained in notify this.notify[item.path].close()
              // delete this.notify[item.path] The close() event above is asynchronous. Deleting it directly here will result in an error. Use setTimeout to add the operation to the asynchronous queue setTimeout(() => {
                delete this.notify[item.path]
              }, 1000)
              this.$store.commit('caseInformation/DEL_PROGRESS', item.path) // Delete the progress object in the progressList of the state in caseInformation}
          })
        },
        deep: true
      }
    }
  }
</script>

<style scoped>

</style>

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