- 项目中经常会遇到需要导出列表内容,或者下载文件之类的需求。结合各种情况,我总结了前端最常用的三种方法来接受后端传过来的文件流并下载,针对不同的情况可以使用不同的方法。
首先是后端将文件转换成byte数组
/**
* 将文件转换成byte数组
* @param filePath 文件File类 通过new File(文件路径)
* @return byte数组
*/
public static byte[] File2byte(File filePath) {
byte[] buffer = null;
try {
FileInputStream fis = new FileInputStream(filePath);
ByteArrayOutputStream bos = new ByteArrayOutputStream();
byte[] b = new byte[1024];
int n;
while ((n = fis.read(b)) != -1) {
bos.write(b, 0, n);
}
fis.close();
bos.close();
buffer = bos.toByteArray();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return buffer;
}
这里有还可以对byte进行base64编码和解码
byte[] bytes = tradeFile(file);
String str = new String(Base64.encodeBase64(bytes))
byte[] bytes = Base64.decodeBase64(str);
后面是重点,前端接受后端文件流并下载的几种方法
方法一
使用场景
针对后端的get请求
具体实现
<a href="后端文件下载接口地址" >下载文件</a>
直接用个标签来接受后端的文件流
方法二
使用场景
针对后端的post请求 利用原生的XMLHttpRequest方法实现
具体实现
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方法实现
具体实现
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之类的,那就要另当别论了。
作者:嘴里起了个泡