前端下载接口返回的文件流

工作中遇到这样的需求，前端请求下载接口，返回一个Excel的二进制文件流，将文件流解析并下载。

1.首先需要设置responseType对象格式为 blob

一般请求方法都是封装使用的，但是这种接口需要特殊处理。我们可以通过对封装方法稍微修改一下即可使用。

//在axios的请求体中增加下面的配置
if(config.headers.responseType){ 
  config.responseType = 'blob' 
}

// 例如这样配置
service.interceptors.request.use(
  config => {
    if(config.headers.responseType) {
      config.responseType = 'blob'
    }
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)

2.有可能需要对响应体进行处理（看自己项目全局的响应体是什么） blob

// 例如
service.interceptors.response.use(
  response => {
    const res = response.data
    if(response.config.headers.responseType) {
      return res
    }
   //...其他操作
  }
)

3.在实际请求方法中增加responseType:'blob'字段

// 例如
export function expressOrders(query) {
  return request({
    url: '/orders/express/export',
    method: 'get',
    params: query,
    headers: {
      responseType:'blob'
    }
  })
}

4.实际使用

expressOrders(queryParams)
.then(response => {
  console.warn("哈哈", response)
  const link=document.createElement('a');//创建a标签
  try {
      let _fileName = "待发货"; 
      link.style.display='none';//隐藏
      const url = window.URL || window.webkitURL || window.moxURL;
      link.href=url.createObjectURL(response);
      link.download = _fileName;
      link.click();//触发click
      window.URL.revokeObjectURL(url);  
  }
  catch(e) {
    console.warn("失败了",e)
  }
})