【post请求下载文件流】如何使用post请求下载文件流 blob

最近有个需求，做文件的下载。其实下载没什么要特别说的，之前都是用的get请求，这次不同，后台用的post请求，返回的是数据流，这种post请求下载文件的方式倒是没怎么弄过。记录一下。

接口

接口地址为：　/file/download/${id}

前端请求这里要注意（这个是重点）设置  responseType: 'blob'。

我这里用 axios 请求，代码如下：

import {axios} from '../../config';
import {BaseURL} from "@/serviceConfig";

// 附件下载
export const download = id => axios({
    method: 'post',
    url: `${BaseURL}/file/download/${id}`, // 请求地址
    responseType: 'blob'
});

然后这样请求回来的结果就是blob：

// 附件点击下载
async downloadDoc (id) {
    let res = await download(id);
    let blob = res.data;
    let url = window.URL.createObjectURL(blob);
    let eleLink = document.createElement('a');
    eleLink.href = url
    eleLink.download = name
    document.body.appendChild(eleLink)
    eleLink.click()
    window.URL.revokeObjectURL(url)
},

拓展

这里出现了不怎么常用的方法：window.URL.createObjectURL(blob) 和 window.URL.revokeObjectURL(url)。

window.URL.createObjectURL(blob)

mdn文档： https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

每次你调用window.URL.createObjectURL()，就会产生一个唯一的对象URL。结果如下：

blob：http://xxxxxx <文件地址>

获得这个地址之后，去开起下载任务。

window.URL.revokeObjectURL(url)

当文档关闭时，它们会自动被释放。如果你的网页要动态使用它们，你需要显式调用 window.URL.revokeObjectURL()来释放它们。

就这样记录一下。