后端流传输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";

})

结束

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

巴特西

后端流传输excel文件到前端

场景

方法

优缺点

架构

开始

后端处理

前端处理

结束

最新文章

热门文章