概要
前端上傳文件的例子很多, 但是下載相關的例子不多, 主要是因為下載本身比較簡單.
但是這次做了個文件導出功能, 接收文件流的時候弄了很長時間也沒有成功, 就因為請求中缺了個配置…
示例
后端
后端比較簡單, 不管有多少需要計算的業務, 最終只是返回文件流.
下面的示例是通過 golang gin 框架實現的.
1 package main
2
3 import (
4 "strconv"
5
6 "github.com/gin-gonic/gin"
7 )
8
9 func main() {
10 route(8000)
11 }
12
13 func route(port int) error {
14
15 r := gin.Default()
16 apiV1 := r.Group("/api/v1")
17
18 // file download
19 apiV1.GET("/download/:fileName", DownloadFile)
20
21 return r.Run(":" + strconv.Itoa(port))
22 }
23
24 func DownloadFile(c *gin.Context) {
25 fileName := c.Param("fileName")
26
27 c.File("./download/" + fileName)
28 }
根據 url 中的文件名, 直接返回 download 文件夾下的某個文件
前端
前端一般有以下幾種情況的下載:
直接顯示圖片
直接將文件流賦給 img 的 src 就行
1 <img src={"http://localhost:8000/api/v1/download/test.png"} width={50} height={60} />
提供下載鏈接, 點擊后下載
1 <a href={"http://localhost:8000/api/v1/download/test.pdf"} />
文件導出, 前端沒有顯示下載鏈接的位置
這種方式需要前端模擬一個 a 標簽的點擊, 從而實現文件的下載.
1 export async function exportFile(params) {
2 return postJson('/api/v1/download/test.xlsx, params, 'blob').then((res) => {
3 let url = URL.createObjectURL(new Blob([res]));
4 let filename = '導出記錄.xlsx';
5 let a = document.createElement('a');
6 a.href = url;
7 a.download = filename;
8 a.click();
9 URL.revokeObjectURL(url);
10 });
11 }
12
13 const postJson = async (url, params, responseType = '') {
14 const response = await request(url, {
15 method: 'POST',
16 header: {
17 'Content-Type': 'application/json',
18 },
19 data: params,
20 responseType: responseType,
21 });
22
23 // 省略... (對response的一些處理)
24
25 return Promise.resolve(response);
26 }
這里有個關鍵的配置 responseType: 'blob' 這個配置不在 header 中,
和 header, data 是平級的. (當時就是這個配置導致導出功能卡了半天, 如果沒有這個配置, 導出之后會顯示文件已經損壞)