避坑之路之前端文件流下载

一、场景

对前端来讲接口返回文件的地址，前端通过url打开下载是最简单的方式。但是有时候会遇到某些场景或者服务端架构，比如登录信息放到header里，这个时候就不能通过打开url的方式下载了，要通过文件流的方式下载。

对于文件流，不像JSON文件那样直观，可以很容易读懂后端返回的结果，对于初次接触文件流下载的方式，前后端可能都很懵，不知道如何正确配置请求信息和响应信息，如果前后端有一方配置错误都可能误导对方，导致浪费联调时间。

下面把前后端注意事项以及如何验证响应结果的方法总结出来，希望能给初次使用者减少点不必要的坑。

二、请求头和响应头

响应头的Content-Disposition和content-type

请求头

三、后端配置

需配置相应类型为二进制类型

// 假设你有一个输入流inputStream指向你要发送的二进制数据

InputStream inputStream = ...;

// 设置内容类型为二进制流

response.setContentType("application/octet-stream");

// 设置响应头，告知浏览器下载文件而不是直接打开

response.setHeader("Content-Disposition", "attachment; filename=\"文件名\"");

}

// 关闭流

outputStream.close();

inputStream.close();

四、前端配置

responseType: 'blob' 必须配置

五、验证响应结果是否正确

打印响应结果

  http.interceptors.response.use(
    async (res: any) => {
      console.log(res.data)
      return Promise.resolve(res.data)
    }

应为Blob类型

六、下载

http.get(url, {}).then(result => {
    console.log('文件流', result)
    const blob = new Blob([result])
    const url = URL.createObjectURL(blob)

    // 创建链接
    const link = document.createElement('a')
    link.href = url
    link.download = name

    // 模拟点击链接进行下载
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

    // 释放 URL 对象
    URL.revokeObjectURL(url)
  })

七、总结

其实文件流的下载也是蛮简单的，但是流对我们不易于理解导致开发联调耽误时间，如果有需求可以参考以上注意事项，希望可以减少踩坑。