Java后端返回流式excel文件或是返回二进制乱码图片，vue前端处理并下载

当文件下载不是直接打开，而是用接口请求，后端返回的是文件流时，我们就要封装一个方法处理文件流，并下载出来。ps：我用的ui是iview。

//一般文件下载会有多个地方用到，所以vue项目一般都是放在utils工具文件夹里
//utlis.js代码如下
import axios from 'axios';
import Vue from 'vue'

//下载excel方法
export function downloadReport(url,params) {
  let token = sessionStorage.getItem('token')
  return axios({
    url: url,
    method: 'get',
    responseType: 'blob',
    params:params,
    headers:{//如果后端需要带token校验登录
      'x-auth-token':token
    }
  }).then(res => {
    if (!res) {
      Vue.prototype.$Message.warning({
        content: '下载模板文件失败',
        type: 'error',
        duration: 1
      })
      return false
    }
    const blob = new Blob([res.data], {
      type:
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
    })
    const downloadElement = document.createElement('a')
    const href = window.URL.createObjectURL(blob)
    if (
      !res.headers['content-disposition'] &&
      !res.headers['Content-Disposition']
    ) {
      console.log(res.data, blob.slice())
      Vue.prototype.$Message.warning({
        content: '下载失败',
        type: 'error',
        duration: 1
      })
      return
    }
    const contentDisposition = decodeURIComponent(
      res.headers['content-disposition'] || res.headers['Content-Disposition']
    ) // 从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;

    const patt = new RegExp('filename\\*=([^;]+\\.[^\\.;]+);*')
    const result = patt.exec(contentDisposition)
    const params = result[1].split("'")
    const filename = params[params.length - 1]
    console.log('文件名:', filename)
    // const filename = 'a.log'
    downloadElement.style.display = 'none'
    downloadElement.href = href
    downloadElement.download = filename // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
    window.URL.revokeObjectURL(href) // 释放掉blob对象
  })
}

//这里是下载图片时的代码
export function downloadImg(url,params,name) {
  let token = sessionStorage.getItem('token')
  return axios({
    url: url,
    method: 'get',
    responseType: 'arraybuffer',
    params:params,
    headers:{
      'x-auth-token':token
    }
  }).then(res => {
    if (!res) {
      Vue.prototype.$Message.warning({
        content: '下载图片失败',
        type: 'error',
        duration: 1
      })
      return false
    }
    var src='data:image/jpg;base64,'+ btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
        // this.srcImg = src; //图片回显
        var link = document.createElement('a');
        link.href = src;
        link.download = name=='reg'?'邀请注册二维码海报.png':'开通VIP二维码海报.png';
        link.click();
        document.body.removeChild(link)
  })
}