前端如何处理后端返回 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('下载失败！')
        }
      })
  }