前端接受后端文件流并下载的几种方法 |
您所在的位置：网站首页 › 前端上传下载文件怎么操作的啊 › 前端接受后端文件流并下载的几种方法 |
|
项目中经常会遇到需要导出列表内容，或者下载文件之类的需求。结合各种情况，我总结了前端最常用的三种方法来接受后端传过来的文件流并下载，针对不同的情况可以使用不同的方法。
首先是后端将文件转换成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请求 具体实现 下载文件直接用个标签来接受后端的文件流 方法二 使用场景 针对后端的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(''); }; 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: '', }) .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之类的，那就要另当别论了。作者：嘴里起了个泡 链接：https://juejin.cn/post/6844903740995010568 来源：稀土掘金 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |