前端将文件流导出为csv/excel文件

---

前言

通常导出功能分为以下两种情况：

• 后端直接返回文件链接；
• 后端返回二进制流；

下面我们将对这两种情况分别给出处理方案。

---

一、 后端直接返回文件链接

前端正常请求，后端返回一个静态文件链接，可以直接使用。

前端通过 window.location.href = url ，实现跳转。

这种处理起来很简单，但是缺点是耗费资源，后端需要把数据转化为excel存起来，并且直接暴露连接，通常外网系统很少会采用。

二、后端返回二进制流

前端请求后端接口，后端返回二进制流。

前端实现 浏览器将数据下载为文件。

重点在于要加上 responseType: ‘blob’ ，这样就可以对返回的blob二进制文件流做操作了。

代码如下：

let params = this.getQueryParams()

IBOX.waxios({
	url: '/api/gs/download_report',
    params,
    responseType: 'blob',
}).then((data) => {
    if (!data) {
      this.$alert('网络异常，请稍后重试！')
        return
      }
      this.downloadFile(data, '举报记录')
}).catch(() => {
	this.loading = false
	  this.$alert('网络异常，请稍后重试！')
})

处理从后端获取到的二进制流：

  /*
	*封装函数 downLoadFile
	*params:  
	*data:二进制文件
	*name:自定义文件名称
	*/
    downloadFile (data, name) {
      if (!data) {
        this.$message.error('下载失败，解析数据为空！')
        return
      }
      // 创建一个新的url，此url指向新建的Blob对象
      let url = window.URL.createObjectURL(new Blob([data]))
      // 创建a标签，并隐藏a标签
      let link = document.createElement('a')
      link.style.display = 'none'
      // a标签的href属性指定下载链接
      link.href = url
      //setAttribute() 方法添加指定的属性，并为其赋指定的值
      // 后缀格式.csv/.xsls要和需要和后端返回格式相同，这里以.csv为例
      link.setAttribute('download', name + '.csv')
      document.body.appendChild(link)
      link.click()
    }

总结

更多细节和问题可参考原文出处。