前端如何下載文件流

前言

如果后台返回的是文件地址，那么前端直接通過 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 加文件地址，就可以下載文件；

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