前端下载文件流（接收后台传来的文件流）

前台请求数据：

 url: '/app/downloadApp',
 method: 'get',
 responseType: 'blob',
 params: data

设置接收参数格式为responseType: ‘blob’,

 downloadFile(res, fileName) {
      if (!res) {
        return
      }
      if (window.navigator.msSaveBlob) {  // IE以及IE内核的浏览器
        try {
          window.navigator.msSaveBlob(res, fileName)  // res为接口返回数据，这里请求的时候已经处理了，如果没处理需要在此之前自行处理var data = new Blob([res.data]) 注意这里需要是数组形式的,fileName就是下载之后的文件名
          // window.navigator.msSaveOrOpenBlob(res, fileName);  //此方法类似上面的方法，区别可自行百度
        } catch (e) {
          console.log(e)
        }
      } else {
        let url = window.URL.createObjectURL(new Blob([res]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', fileName)// 文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link) // 下载完成移除元素
        window.URL.revokeObjectURL(url) // 释放掉blob对象
      }
 },
 download(){
      var data = {
        appId:this.appId
      }
      downloadAppAjax(data).then(res => {
         const filename = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
         console.log(filename)
         this.downloadFile(res.data,filename)
      })
    }

这里的downloadAppAjax调用后台接口，请求数据，获取后台返回的数据没有文件名，最后发现在header Content-Disposition属性里 attachment;filename=app.jpg

所以我们要实现下载自动重命名就需要拿出filename，这里我们使用decodeURI对Content-Disposition属性值进行解码，拿到filename:

decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);

拿到文件流和文件名后 接收文件流并创建地址  

let url =window.URL.createObjectURL(new Blob([res]))

接着利用a标签进行下载即可。