前端如何處理后端返回 Blob 格式的數據

情景：React項目，在做「下載」功能時，后端返回的數據格式為 Blob 格式，需要在前端調 API 時，對數據進行處理。

以下👇是前端做的處理，希望可以幫到你。

直接貼代碼：

  // 引入
  import contentDisposition from 'content-disposition'
  import FileSaver from 'file-saver'

  // 定義 api 
  export type xxxApiReault = ApiResult<any>
  async function downloadRandom(
    xxx: number,
    xxx: string,
    xxx: number,
  ): Promise<xxxApiReault> {
    const resp = await request({
      url: 'xxx',
      method: 'POST',
      responseType: 'blob', // ⚠️注意：響應類型
    })
    const disposition = contentDisposition.parse(resp.headers['content-disposition']) // ⚠️ 這里
    FileSaver.saveAs(new Blob([resp.data]), disposition.parameters.filename) // ⚠️ 這里
    return resp.data
  }

  // 調用 api
  const downloadTemplate = () => {
    $api.random
      .randomFile(xxx, xxx, xxx)
      .then((res) => {
        if (res instanceof Blob) { // 注意⚠️
          Message.success('下載成功！')
        } else {
          Message.error('下載失敗！')
        }
      })
  }