react接收后端文件_React 文件流实现文件下载

同种方法-两种方案：

第一种：页面上自己手动添加a标签

第二种：js自动生成a标签(推荐第二种)

今天在react项目开发过程中，有这样的一个需求就是文件下载。

自己认为：通过接口请求后端发给返给自己的会是一个文件下载的地址或者路径什么的，只要把这个地址赋值给a链接即可

实际情况：后端发给我的是一端文件流，那么就是需要们自动去解析文件流，然后把解析出来的数据，通过a标签进行下载

第一种方案：

//点击文件下载

onClick={(event) => {

event.preventDefault();

event.stopPropagation();

fetch(downloadFiles, { //downloadFiles 接口请求地址

method: 'get',

credentials: 'include',

headers: new Headers({

'Content-Type': 'application/json',

'X-Auth-Token': User.getToken(),//设置header 获取token

})

}).then((response) => {

response.blob().then(blob => {

let blobUrl = window.URL.createObjectURL(blob);