vue项目实现文件下载进度条

下载文件所需要的接口；

onDownloadProgress : function(ProgressEvent) {
      ss(ProgressEvent)
    }

用ss函数将onDownloadProgress : function(ProgressEvent) 中的ProgressEvent带回下载的页面

Undonedownload() {
      this.$message({
        showClose : true,
        message   : '正在导出',
        type      : 'success'
      })
      var data = {uploadState : 0}
      var ss = function(a) {
        const load = a.loaded
        const total = a.total
        const progress = (load / total) * 100
        console.log('progress=' + progress)
        // 一开始已经在计算了 这里要超过先前的计算才能继续往下
        this.percentage = Math.floor(progress)
      }
      UploadFn.getFileArchListExcel(data, ss).then(ref => {
        console.log(ref)
        const filename = '上传未完成名单'
        var blob = new Blob([ref.data], {type : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'})
        var Temp = document.createElement('a')
        Temp.href = window.URL.createObjectURL(blob)
        Temp.download = window.decodeURI(filename)
        document.body.appendChild(Temp)
        Temp.click()
        document.body.removeChild(Temp)
        window.URL.revokeObjectURL(Temp)
      })
    },

    

下载所需要的方法 

我们定义ss函数用于接收axios返回的ProgressEvent，记为参数a

        const load = a.loaded
        const total = a.total
        const progress = (load / total) * 100
        console.log('progress=' + progress)
        this.percentage = Math.floor(progress)

计算下载进度

UploadFn.getFileArchListExcel(data, ss).then(ref => {
        console.log(ref)
        const filename = '上传未完成名单'
        var blob = new Blob([ref.data], {type : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'})
        var Temp = document.createElement('a')
        Temp.href = window.URL.createObjectURL(blob)
        Temp.download = window.decodeURI(filename)
        document.body.appendChild(Temp)
        Temp.click()
        document.body.removeChild(Temp)
        window.URL.revokeObjectURL(Temp)
      })

通过接口传参数，并通过文件流进行下载