前端二进制流文件下载-Blob操作

前端如何实现文件下载

前端下载文件的方法有两种， 一种是后端返回下载的URL， 使用 Window.open(URL) 下载， 另一种就是后端直接返回文件的二进制内容，前端做转换再下载。

使用场景

如果后台返回的是 get 请求的下载可以直接使用 a 标签下载

<a href='http://下载地址' target="_blank" rel="noopener noreferrer nofollow">下载</a>

如果后台返回的是 URL 地址

window.open(URL, '_blank')

如果后台的的下载接口是 post 请求时，需要使用 blob 转换，

前端如何将二进制文件做转换实现下载呢？

只要思想就是把后端返回的二进制文件放在 Blob 里面，并且把使用Blob 创建一个URL ，再通过JavaScript动态创建一个a标签，使用a标签打开这个 URL 。

获取后台返回的值要用 Blob 类型来接收， 把 axios 的 responseType 改成 blob， 并且在接口调用成功后进行上面的步骤。

具体实现

axios.post({
   
method: 'post',
url: '/export',
responseType: 'blob'
<