axios 设置的responseType 为blob下载文件，失败时转换成json

使用axios的responseType设置为blob下载文件

• 成功时

// 兼容ie
if(window.naviagtor.msSaveBlob){
  try{
    const blobData = new Blob([res.data])
    window.navigator.msSaveBlob(blobData,'文件名')
  }catch(e){
    console.log('下载文件失败')
  }
}else{
  const url = window.URL.createobjectURL(res.data)
  const link = document.createElement('a')
  link.href = url
  link.download = '文件名'
  link.click()
  URL.revokeobjectURL(url)
}

• 失败时
  当下载文件失败，后端返回json格式，但是在响应体里面无法获取响应体，此时就需要将blob转换为json
  主要使用FileReader构造函数
  **FileReader** 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

FileReader

const reader = new FileReader()
reader.onload = (event) => {
  const result = JSON.parse(event.target.result)
  // 此时可以根据后端相应数据进行提示
}

注意点

如果使用 FileReader 将blob转换为必须等待响应体返回 type:'application/json',注意ie浏览器中返回的type类型，带有charset=utf-8 ,可以优先使用type进行判断，如果type 包含application/json，就进行错误处理

完整代码

function downloadFile(id){
  axios.post('/file',{fileId:id}).then(res => {
    if(res.data.type.indexOf('application/json') > -1){
      const reader = new FileReader()
      reader.onload = (event) => {
      const result = JSON.parse(event.target.result)
      // 此时可以根据后端相应数据进行提示
      }
    }else{
      if(window.naviagtor.msSaveBlob){
        try{
          const blobData = new Blob([res.data])
          window.navigator.msSaveBlob(blobData,'文件名')
        }catch(e){
          console.log('下载文件失败')
        }
      }else{
        const url = window.URL.createobjectURL(res.data)
        const link = document.createElement('a')
        link.href = url
        link.download = '文件名'
        link.click()
        URL.revokeobjectURL(url)
      }
    }
  })
}