后端接口返回的文件流，前端通过blob转换url下载文件(兼容ie)

1.接口请求：

let params = {
  id: 1,
  name: '李四'
}
this.$axios.post('/xxxx', params, { responseType: 'blob' }).then(res => {
  if (res.data) {
    this.fileDownLoad(res.data, 'text.xlsx')
  }
}).catch(() => {
  this.$message.error('下载失败')
})

注意：responseType:’blob’要加上，这样就会返回Blob对象，不然就会出现下载的xlsx在试图打开文件时遇到错误的问题。

responseType：设置该值能够改变响应类型，就是告诉服务器你期望的响应格式。

值	DOMString (这个是默认类型)
’ ’	DOMString (这个是默认类型)
arraybuffer	ArrayBuffer对象
blob	Blob对象
document	Document对象
json	JavaScript object, parsed from a JSON string returned by the server
text	DOMString

ps:不知道为什么我使用responseType: 'arraybuffer’也可以下载正确的格式,但是同一个接口同事要使用’blob’才可以。

2.blob转换URL方法：

fileDownLoad (data, name) {
  // 判断浏览器是否支持blob对象
  try {
    // 该实例化的方式第一个参数必须是数组的格式
    var blob = new Blob([data], { type: name })
  } catch (e) {
    // 旧版本浏览器下的blob创建对象
    window.BlobBuilder = window.BlobBuilder ||
                        window.WebKitBlobBuilder ||
                        window.MozBlobBuilder ||
                        window.MSBlobBuilder
    if (e.name === 'TypeError' && window.BlobBuilder) {
      var blobbuilder = new BlobBuilder()
      BlobBuilder.append(data)
      var blob = blobbuilder.getBlob("application/zip")
    } else {
      alert('浏览器版本较低，暂不支持该文件类型下载')
    }
  }
 	if (!!window.ActiveXObject || 'ActiveXObject' in window) { //判断了有该方法即为IE浏览器
    try {
      window.navigator.msSaveBlob(blob, name)
    } catch (e) {
      console.log(e);
    }
  } else {
    var url = window.URL.createObjectURL(blob)
    var linkElement = document.createElement('a') // 创建点击下载的元素
    linkElement.setAttribute('href', url)
    linkElement.setAttribute('downLoad', name)
    linkElement.click()
  }
},

3.结果展示（浏览器会直接下载）：