Vue中axios实现文件流下载，并监听下载进度

江湖人称波哥

已于 2022-05-23 16:18:28 修改

阅读量4.1k

点赞数 2

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-05-23 16:18:09 首次发布

本文链接：https://blog.csdn.net/yuanbo_520/article/details/124929354

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

axios发送请求 post或get

/**
  * post请求下载
  */
 postDown(){
   // post||get
   axios.post(
     url,
     data, // body
     {
       responseType:'blob',
       onDownloadProgress:function(event){ // 下载进度监听
         if(event.loaded===event.total){
           // 下载完成 loading = true
         }
       }
     }
   ).then(res=> {
     if(res.status===200){
       var fileName = res.headers['filename']// 需要后台返了filename
       var suffix = 'zip'
       if(fileName){
         var arr =fileName.split('.')
         suffix = arr[arr.length-1]
       }
       var content = res.data
       if(content.size<1){
         // 文件不存在
         this.$message({type:'info',message:'文件不存在'})
         return 
       }
       var blob = new Blob([content])
       fileName = 'timestamp.'+suffix
       this.downFile(null, blob, fileName)
     }
   }).catch(error=>{
     console.log(error)
   })
   
 },

生成a标签执行下载

/**
 * 生成下载标签，执行下载
 */
downFile(url, blob, fileName){
  var aTag = document.createElement('a')
  if(url){
    aTag.href = url
  }
  if(blob){
     aTag.href = URL.createObjectURL(blob)
  }
  if(fileName){
    aTag.download = fileName
  }
  aTag.click()
  URL.revokeObjectURL(aTag.href)
}