前端下載文件流（接收后台傳來的文件流）

前台請求數據：

 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標簽進行下載即可。