vue下载文件时显示进度条

原创最新推荐文章于 2026-06-29 09:54:57 发布 4.3k 阅读 AI写同款

4540粉丝135篇原创

关注

vue+axios+el-progress(elementUI组件)实现下载进度条实时监听（小白简洁版）其实还是踩了很多坑的，什么XHR等等，经过实验，以上方法就可以简便实现功能。开始接收响应数据时，会定期触发该回调函数，以提供下载进度信息。以上，便可以实现一个下载进度条监听的功能，是一个回调函数，它作为参数传递给。请让后端在响应头中加上。阅读详情

AI摘要

本文介绍了如何在Vue应用中实现单个和批量文件下载功能，包括使用el-button显示下载按钮或进度条，利用axios进行文件下载，以及处理下载进度和批量导出时的进度显示。同时提及了深拷贝方法和Blob对象的使用。

1.单个下载（开始是导出按钮下载显示进度条）

html

 <el-button @click.stop="exportReport(scope.row, scope.index)" 
    v-if="!scope.row.schedule" icon="el-icon-download"
     size="small" type="text"style="color: #409eff">导出报告
 </el-button>
 <el-progress style="width: 60px;display:inline-block;margin-left: 20px;" 
      v-else :text-inside="true" :stroke-width="20" 
       :percentage="scope.row.scheduleNumber" status="success" />

因为接口没有返回schedule和scheduleNumber数据只是前端需要用来判断显示按钮还是进度条的所以就手动给数组添加响应式数据

     this.data.map((item, index) => {
        this.$set(item, 'schedule', false);
        this.$set(item, 'scheduleNumber', 0);
        return item;
      });

js部分

  exportReport(row) {
      let data=this.visible?this.selectionList:this.data
    // 自己封装的方法
      downloadGet('/api/blade-robot/siteInfo/export-template','巡检报告', this.schedule, row).then(() => {
        data.forEach((x) => {
          if (x.id === row.id) {
            x.schedule = false
          }
        })
      })
    },
    schedule(progressEvent, row) {
    // 回调的progressEvent参数里有一个progressEvent.loaded和progressEvent.total两个参数，分别意思为已下载的文件大小和总文件大小
    // 因为total一直为0，经研究发现需要后端传给我ContentLength到response里这个值才会有值
    // 然而又发现后端使用的是minio这个文件服务器，所以这个文件大小太难获取了，所以我决定不改后端，直接写死了文件大小
    setTimeout(() => {
      let data=this.visible?this.selectionList:this.data
      data.forEach((x) => {
        if (x.id === row.id) {
            x.schedule = true
            x.scheduleNumber = Math.round(progressEvent.loaded / 3715 * 100)
            if( x.schedule == true){
              setTimeout(() => {
                 x.schedule = false
              }, 2000);
            }
        }
      })
    }, 2000);
    },

downloadGet方法

export const downloadGet = (url, filename, callback, callbackParameter)=> {
  return request({
    url:url, 
    method: 'get',
    responseType: 'blob',
    timeout: 120000,
    // 下载的实时回调，axios里的
    onDownloadProgress: (a) => {
      if (callback) {
        callback(a, callbackParameter)
      }
    }
  }).then((r) => {
  // 下面的代码就是拿到字节流后转为文件的方法，想研究的可以自行百度
    const content = r.data
    const blob = new Blob([content],{type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a')
      elink.download = filename
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href)
      document.body.removeChild(elink)
    }else if (typeof window.navigator.msSaveBlob !== 'undefined'){
       // IE
       let blob = new Blob([content], {type: 'application/force-download'});
      navigator.msSaveBlob(blob, filename)
    }else {
      // Firefox
      var file = new File([content], filename, {type: 'application/force-download'});
      window.open(URL.createObjectURL(file));
    }
  }).catch((r) => {
    console.error(r)
  })
}

以上就可以实现每行下载时候去显示进度条了

2.批量下载弹框

弹框html

<el-dialog title="批量导出巡检报告" @close="toClose"
 :close-on-click-modal="false" :visible="visible" lock-scroll append-to-body
  width="600px" :modal-append-to-body="false">
    <el-table :data="selectionList" border style="width: 100%">
    <el-table-column type="index"label="序号" width="50"></el-table-column>
    <el-table-column prop="id" label="文件名称">
      <template slot-scope="scope">
       <span>{{scope.row.id}}巡检报告</span>
      </template>
    </el-table-column>
    <el-table-column prop="scheduleNumber" label="下载进度">
      <template slot-scope="scope">
        <el-progress :percentage="scope.row.scheduleNumber"  :text-inside="true" :stroke-            
         width="20"  status="success"></el-progress>
      </template>
    </el-table-column>
  </el-table>
</el-dialog>

    import { deepClone } from "@/util/util";//引入深拷贝方法
    //表格选中多个
    selectionChange(list) {
      this.selectionList = deepClone(list);
    },
    //点击批量下载方法
    handleDelete() {
      if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
      }
      this.$confirm("确定将选择数据批量导出巡检报告?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
      })
      .then(() => {
        this.$nextTick(() => {
          this.visible=true
          this.selectionList.forEach(item=>{
          this.exportReport(item)
        })
        });
      })
      .catch(() => {});
      },
    //关闭弹框清空选中状态
     toClose(){
      this.visible=false
      this.onLoad(this.page);
      this.$refs.crud.toggleSelection();
    },

深拷贝方法（不使用深拷贝的话弹框和表格进度条会冲突！！！！！）

/**
 * 对象深拷贝
 */
export const deepClone = data => {
  var type = getObjType(data)
  var obj
  if (type === 'array') {
    obj = []
  } else if (type === 'object') {
    obj = {}
  } else {
    //不再具有下一层次
    return data
  }
  if (type === 'array') {
    for (var i = 0, len = data.length; i < len; i++) {
      obj.push(deepClone(data[i]))
    }
  } else if (type === 'object') {
    for (var key in data) {
      obj[key] = deepClone(data[key])
    }
  }
  return obj
}

最后就是设置导出文件的类型在上文封装下载方法中 type设置的

const blob = new Blob([content],{type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})

关于 Blob 的 content-type 的部分媒体类型可以参照下面！！！！！

".*"="application/octet-stream"
".001"="application/x-001"
".301"="application/x-301"
".323"="text/h323"
".906"="application/x-906"
".907"="drawing/907"
".a11"="application/x-a11"
".acp"="audio/x-mei-aac"
".ai"="application/postscript"
".aif"="audio/aiff"
".aifc"="audio/aiff"
".aiff"="audio/aiff"
".anv"="application/x-anv"
".asa"="text/asa"
".asf"="video/x-ms-asf"
".asp"="text/asp"
".asx"="video/x-ms-asf"
".au"="audio/basic"
".avi"="video/avi"
".awf"="application/vnd.adobe.workflow"
".biz"="text/xml"
".bmp"="application/x-bmp"
".bot"="application/x-bot"
".c4t"="application/x-c4t"
".c90"="application/x-c90"
".cal"="application/x-cals"
".cat"="application/vnd.ms-pki.seccat"
".cdf"="application/x-netcdf"
".cdr"="application/x-cdr"
".cel"="application/x-cel"
".cer"="application/x-x509-ca-cert"
".cg4"="application/x-g4"
".cgm"="application/x-cgm"
".cit"="application/x-cit"
 
".doc"="application/msword"
".docx"="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
".rtf"="application/rtf"
".xls"="application/vnd.ms-excel application/x-excel"
".xlsx"="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
".ppt"="application/vnd.ms-powerpoint"
".pptx"="application/vnd.openxmlformats-officedocument.presentationml.presentation"
".pps"="application/vnd.ms-powerpoint"
".ppsx"="application/vnd.openxmlformats-officedocument.presentationml.slideshow"
".pdf"="application/pdf"
".swf"="application/x-shockwave-flash"
".dll"="application/x-msdownload"
".exe"="application/octet-stream"
".msi"="application/octet-stream"
".chm"="application/octet-stream"
".cab"="application/octet-stream"
".ocx"="application/octet-stream"
".rar"="application/octet-stream"
".tar"="application/x-tar"
".tgz"="application/x-compressed"
".zip"="application/x-zip-compressed"
".z"="application/x-compress"
".wav"="audio/wav"
".wma"="audio/x-ms-wma"
".wmv"="video/x-ms-wmv"
".mp3, .mp2, .mpe, .mpeg, .mpg"="audio/mpeg"
".rm"="application/vnd.rn-realmedia"
".mid, .midi, .rmi"="audio/mid"
".bmp"="image/bmp"
".gif"="image/gif"
".png"="image/png"
".tif, .tiff"="image/tiff"
".jpe, .jpeg, .jpg"="image/jpeg"
".txt"="text/plain"
".xml"="text/xml"
".html"="text/html"
".css"="text/css"
".js"="text/javascript"
".mht, .mhtml"="message/rfc822"

大概率就OK了！！！！！等待大文件联调看效果！！！！！！（其中的延时器是因为我现在测试的文件只有4kb没有进度条效果所以出此下策请辨别哦~~~~）