前端接收后端文件流并下载的几种方法

项目中经常会遇到需要导出列表内容,或者下载文件之类的需求。

方法一

使用场景

针对后端的get请求

具体实现

1
<a href="后端文件下载接口地址" >下载文件</a>

直接用个<a>标签来接收后端的文件流

方法二

使用场景

针对后端的post请求,利用原生的XMLHttpRequest方法实现

具体实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function request () {
const req = new XMLHttpRequest();
req.open('POST', '<接口地址>', true);
req.responseType = 'blob';
req.setRequestHeader('Content-Type', 'application/json');
req.onload = function() {
const data = req.response;
const blob = new Blob([data]);
const blobUrl = window.URL.createObjectURL(blob);
download(blobUrl) ;
};
req.send('<请求参数:json字符串>');
};

function download(blobUrl) {
const a = document.createElement('a');
a.download = '<文件名>';
a.href = blobUrl;
a.click();
}

request();

方法三

使用场景

针对后端的post请求,利用原生的fetch方法实现

具体实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function request() {
fetch('<接口地址>', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: '<请求参数:json字符串>',
})
.then(res => res.blob())
.then(data => {
let blobUrl = window.URL.createObjectURL(data);
download(blobUrl);
});
}

function download(blobUrl) {
const a = document.createElement('a');
a.download = '<文件名>';
a.href = blobUrl;
a.click();
}

request();

总结

  • 如果后端提供的下载接口是get类型,可以直接使用方法一,简单又便捷;当然如果想使用方法二、三也是可以的。
  • 如果后端提供的下载接口是post类型,就必须要用方法二或者方法三。

方法二和方法三怎么取舍?

当项目的接口请求全是基于XMLHttpRequest实现的,方法二更加适合,只要基于原来项目中的接口请求工具类加以扩展即可。
当项目的接口请求全是基于fetch实现的,方法三更加适合,比如基于Ant Design Pro的后台管理系统项目,里面的请求类就是基于fetch的,所以直接使用方法三,只要在其request.js文件中稍作修改即可。

当然这里讨论的是两种原生的请求方式,如果项目中引用了第三方请求包来发送请求,比如axios之类的,那就另当别论。

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :