前端如何下載檔案流

前言

如果後臺返回的是檔案地址，那麼前端直接通過 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 加檔案地址，就可以下載檔案；

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