后端流傳輸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";
})

結束

就沒了~記錄下流傳輸中前端和后端最重要的部分