后端接口返回的文件流,前端通过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在试图打开文件时遇到错误的问题。
后端接口返回的文件流,前端通过blob转换url下载文件(兼容ie)_第1张图片
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.结果展示(浏览器会直接下载):

在这里插入图片描述

你可能感兴趣的:(前端应用,javascript,blob,url)