vue 后台接口返回文件流地址的下载

公司做一个生成代码的Web项目要后台接收返回的是文件流，结果接收到的内容如下图

第一次获取这样的数据，无从下手，然后就开始了百度之路，随后看到一个帖子感觉还算靠谱，然后就一步一步跟着帖子开始实现，废话不多说直接上代码

getGenerateCodeList(obj) { return postFile("/gCode/createCode/generateCode", obj) },//4.2获取表字段列表

//axiosconfig.js
export function postFile (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, params,{responseType:'blob'})//重要的是{responseType:'blob'}这个参数
      .then(
        res => {
          resolve(res.data)
        },
        err => {
          reject(err.data)
        }
      )
      .catch(err => {
        reject(err.data)
      })
  })
}

//下载方法
inventorySubmit: function () {
  this.$refs.addEquipmentForm.validate((valid) => {
    if (valid) {
      this.$api.cKApi.getGenerateCodeList(this.addEquipmentForm).then((res) => {
        console.log(res)
        let url = window.URL.createObjectURL(res)
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.download =this.addEquipmentForm.objectName + '.zip'//根据输入的对象名称生成zip文件
          // document.body.appendChild(link)
        link.click()
      })
    }
  })
}

因为传给后台的数据是必须输入的，所以加了表单校验，把输入的值传给后台，后台根据前端传的值返回一个流，按照以上代码写就可以实现了，如果想要xls文件只需要把定义名称的后缀改一下就ok了