Axios 设置 responseType：blob 导致后端返回的任意结果都会转换为 blob { }

在vue项目中，使用文件下载的时候，后端返回的二进制数据流，需要在axios里面设置responseType:blob，否则会打开无效。

1、当后端接口稳定返回的不是二进制数据流的话。那么设置了 responseType：blob。 也会把后端的返回值解析成为 blob ｛｝
如下图

解决方法:

      const _this = this
      this.GET_DOWNLOAD_FILE(params).then(response => {
     
        const fileReader = new FileReader()
        fileReader.onload = function() {
     
          try {
     
          	// this.result  = 字符串类型的 response 
            const fileResult = JSON.parse(this.result)  
            //  如果接口返回的数据，非二进制的话。可以根据response做出响应的判断。
            if (fileResult.xxx) {
      //想干啥你干啥 } 
            //  ps：JSON.parse()是Javascript中一个常用的 JSON 转换方法，JSON.parse()可以把JSON规则的字符串转换为JSONObject 反之就会报错。
            //  如果接口内容为二进制数据。那么JSON.parse解析失败, 抛出异常来到catch进行执行下载操作
            }
          } catch (err) {
     
            // 当前构造函数内的this是指向它的实例对象的。所以在外层声明了一个this用于指向全局
            _this.saveFileToLocal(response, fileName) // 调用下载文件的方法
          }
        }
        fileReader.readAsText(response)
      }).catch(e => {
     
		 console.log('接口报错要执行的代码')
      })

文件下载方法 兼容 IE

    saveFileToLocal(res, fileName) {
     
      // 兼容 IE
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
     
        window.navigator.msSaveOrOpenBlob(new Blob([res]), fileName)
      } else {
     
        // 非IE 浏览器
        const url = window.URL.createObjectURL(new Blob([res], {
      type: res.type }))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', `${
       fileName}`)
        document.body.appendChild(link)
        link.click()
      }
    },

2、什么是 FileReader()

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

属性：

• FileReader.error 表示在读取文件时发生的错误
• FileReader.readyState
• FilerReader.result 读取到的结果 （上面用到的）

个人总结： 在文件没有下载之前，通过fileReader对象，访问到当前存储在用户计算机的内容（this.result）利用 try catch 进行区分 result 的结果是否可以下载。

PS：欢迎指出不足之处

你唯一能把握的，是变成更好的自己