前端如何下載文件流

• 2021 年 10 月 22 日
• 筆記
• VUE, 前端

前言

如果後台返回的是文件地址，那麼前端直接通過 window.location.href 加文件地址，就可以下載文件；

但是如果後台返回的是文件流，那麼前端就需要做一些處理；

其實前端處理的核心：就是將文件流轉為文件，然後再模擬點擊，實現前者的效果。

步驟

1. 封裝一個下載工具

這個工具的作用就是，將獲取的文件流轉為文件，並模擬點擊該文件，實現下載

先貼程式碼，download.js（可直接複製使用）

export const download = (res, type, filename) => {
  // 創建blob對象，解析流數據
  const blob = new Blob([res], {
  	// 設置返回的文件類型
  	// type: 'application/pdf;charset=UTF-8' 表示下載文檔為pdf，如果是word則設置為msword，excel為excel
    type: type
  })
  // 這裡就是創建一個a標籤，等下用來模擬點擊事件
  const a = document.createElement('a')
  // 兼容webkix瀏覽器，處理webkit瀏覽器中href自動添加blob前綴，默認在瀏覽器打開而不是下載
  const URL = window.URL || window.webkitURL
  // 根據解析後的blob對象創建URL 對象
  const herf = URL.createObjectURL(blob)
  // 下載鏈接
  a.href = herf
  // 下載文件名,如果後端沒有返回，可以自己寫a.download = '文件.pdf'
  a.download = filename
  document.body.appendChild(a)
  // 點擊a標籤，進行下載 
  a.click()
  // 收尾工作，在記憶體中移除URL 對象
  document.body.removeChild(a)
  window.URL.revokeObjectURL(herf)
}

上面程式碼的重點是Blob對象，詳情可參考：MDN文檔：Blob對象

2. 獲取文件流

這裡就是調用後台介面，獲取文件流

後台方法：

@GetMapping(value = "/download-file")
    public byte[] downloadFile(String contractNo){
        log.info("=== 下載合約文件 ===");
        byte[] bytes = service.downloadContract(Dict.create().set("contractNo", contractNo));
        return bytes;
    }

前端獲取文件流的方法：

import { download } from '@/utils/download'
import { axios } from '@/utils/request'

async downloadFile (contractNo) {
    const res = await axios.get(this.downloadContractFilePath + contractNo, {
        // 設置返回數據類型，這裡我設置的是"arraybuffer";如果不設置則下載下來的pdf會是空白
        responseType: 'arraybuffer'
    })
    // 調用封裝好的下載函數
    download(res, 'application/pdf;charset=UTF-8', moment().format('YYYYMMDD') + '.pdf')
}

關於responseType可參考官網：XMLHttpRequest.responseType – Web API 介面參考 | MDN (mozilla.org)

3. 點擊標籤a

最後我們創建一個標籤a，來點擊下載文件

<a @click="downloadFile(contractNo)">點擊下載</a>

總結

• 如果後台返回的是文件地址，那麼前端直接通過 window.location.href 加文件地址，就可以下載文件；

• 如果後台返回的是文件流，那麼前端就需要做一些處理：就是將文件流轉為文件，然後再模擬點擊，進行下載。