前端将后端返回的文件流转为excel并下载

也算是自己的一个总结吧

在遇到后端给前端返回的一个文件流的注意事项

首先自己封装了一个方法  放在了utils里面

export function exportFile(data, type, fileName) {
  const blob = new Blob([data], {
    // type类型后端返回来的数据中会有，根据自己实际进行修改
    // 表格下载为 application/xlsx，压缩包为 application/zip等，
    type: type
  })
  const filename = fileName
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
    window.navigator.msSaveBlob(blob, filename)
  } else {
    var blobURL = window.URL.createObjectURL(blob)
    // 创建隐藏<a>标签进行下载
    var tempLink = document.createElement('a')
    tempLink.style.display = 'none'
    tempLink.href = blobURL
    tempLink.setAttribute('download', filename)
    if (typeof tempLink.download === 'undefined') {
      tempLink.setAttribute('target', '_blank')
    }
    document.body.appendChild(tempLink)
    tempLink.click()
    document.body.removeChild(tempLink)// 移除dom元素
    window.URL.revokeObjectURL(blobURL)// 释放bolb内存
  }
}

其次就是  调用接口了

在调用接口  我是有封装 axios

所以  在写接口的时候 要注意加上   responseType: 'blob'

export function Report(data) {
  return request({
    url: 'url',
    method: 'post',
    responseType: 'blob',
    data
  })
}

接下来就是在组件中去调用

 

以上就是我的总结办法    希望可以一起进步学习    如果可以的话可以关注我一起学习