后端流传输excel文件到前端

场景

公司有个需求，请求接口返回一个对应的excel数据

方法

• 1、可以使用后端生成excel后，返回一个下载地址
• 2、可以把数据吐给前端，前端使用对应的插件转换成excel数据
• 3、使用流式传输

优缺点

• 1、第一种方法，需要定期清理本地缓存的excel文件，需要单独的程序运行
• 2、第二种方法，需要用到前端一定的电脑内存，我们的客户机器比较老旧，所以可能会对用户的电脑造成一定的卡顿
• 3、第三种方法，流式数据的传输在一定意义上解决了这些问题，但是如果传输过程中断是需要重新传输的（采用）

架构

前端采用 Angular 后端采用 Golang，框架是Gin，后端excel包采用excelize

开始

后端处理

后端需要注意header的头设置

c.Header("response-type", "blob")
c.Header("Content-Type", "application/vnd.ms-excel;charset=utf8")

返回的时候

//先将excel的内容写进buffer
data, _ := excelFile.WriteToBuffer()
//再使用gin自带的buffer响应或者这个excel插件自带的buffer响应返回给前端流数据
_, _ = data.WriteTo(c.Writer) //插件自带响应 (c *gin.Context)
c.Writer.Write(data.Bytes()) //gin框架的流响应

前端处理

• 1、首先是请求部分处理

getExcelData(searchParams: { [key: string]: string }):Observable<any>{
  // @ts-ignore
  return this.http.get<any>(`/api/report-output`,{params: HttpUtils.getSearchParams(searchParams),  responseType: 'blob'}); //responseType必须是blob二进制流类型
}

• 2、subscribe处理

 this.service.getExcelData(this.searchParams).subscribe((reader)=>{
  const blob = new Blob([reader],{type:'application/vnd.ms-excel'});
  let date = new Date
  saveAs(blob,`${name}-${formatDate(date, 'yyyy-MM-dd', this.locale)}.xlsx`) //这里需要借助saveAs插件 import { saveAs } from "file-saver";
})

结束

就没了~记录下流传输中前端和后端最重要的部分