首先下载axios要传递请求头的数据

 headers: { 'Access-Control-Allow-Headers': 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild' },
 responseType: 'blob',

得到请求结果时

// 处理下载失败的问题,data是得到的请求结果
  if (data.type === 'application/json') {
    const reader = new FileReader()
    reader.onload = function () {
      const message = JSON.parse(reader.result).bizMsg
      Message.error(message) // 将错误信息显示出来
    }
    reader.readAsText(data)
    return
  }
  const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
  const a = document.createElement('a')
  const href = window.URL.createObjectURL(blob) // 创建下载的链接
  a.href = href
  a.download = filename // 下载后文件名
  document.body.appendChild(a)
  a.click() // 点击下载
  document.body.removeChild(a) // 下载完成移除元素
  window.URL.revokeObjectURL(href) // 释放掉blob对象

如果说后端返回的文件流和错误信息得到的blob.type都为application/json,
重点,这个要找后端,让他修改字段文件流的类型一定不是application/json

补充axios获取后端自定义的响应头

需要后端在header中添加 Access-Control-Expose-Headers 信息,把自定义的属性暴漏出来,前端才可以拿到

// Content-Disposition自定义属性名称
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐