1. 前言
基于传统的SpringMVC框架下，实现一个这样的功能并不难，但是在响应式编程中，使用webflux实现时却大不一样，需要做到无阻塞，符合响应式规范。来一起看看吧
2. 从入口开始，前端部分
我们假设一种常见的场景，用户需要一个批量导出的功能，所以会勾选表单中的多个，然后拿到对应的id，传给后端，这里我传递的直接是文件名
/**
* 批量导出
*/
function batchExport(){
// 获取表单
const form = document.getElementById("fileForm");
// 获取所有选中的复选框
const checkedBoxes = [];
const checkboxes = form.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach((checkbox) => {
if (checkbox.checked) {
checkedBoxes.push($(checkbox).attr("id"));
}
});
//异步请求
fetch(contextPath + "share/batchDownloadFile", {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
fileNames: checkedBoxes,
})
})
.then(response => {
const disposition = response.headers.get('Content-Disposition');
const filename = disposition ? disposition.split('filename=')[1].replaceAll("\"","") : 'compressedFiles.zip';
return response.blob().then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
});
})
.catch(error => {console.error('Error:', error);});
}
因为发送的是POST请求，所以拿到后端返回的是直接的字节数组，需要对返回的数据再进行一次转换，提供一个虚拟的a标签触发浏览器的下载。
const disposition = response.headers.get('Content-Disposition');
const filename = disposition ? disposition.split('filename=')[1].replaceAll("\"","") : 'compressedFiles.zip';
return response.blob().then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
});
接着我们看后段部分
3. 数据处理，后端部分
直接使用Mono<String> requestBody接收前端的请求参数，这样的操作需要主要的是，不要直接像传统MVC框架一样，在方法第一行就直接
log.info("batchDownloadFile received payload:{}", requestBody);
这样的操作是会有问题的，因为requestBody 并不是实际的请求参数，而是Mono对象。
完整代码如下
/**
* 批量下载文件
*
* @param requestBody 请求正文
* @return {@link Mono}<{@link ResponseEntity}<{@link Flux}<{@link DataBuffer}>>>
*/
@PostMapping(value = "/batchDownloadFile", produces = "application/zip")
public Mono<ResponseEntity<Flux<DataBuffer>>> batchDownloadFile(@RequestBody Mono<String> requestBody) {
return requestBody.doOnNext(it -> log.info("batchDownloadFile received payload:{}", it))
.map(JSON::parseObject)
.doOnError(it -> {
it.printStackTrace();
log.error("batchDownloadFile failed");
})
.map(it -> {
//获取入参中所有的文件名，进行遍历，并增加到一个zip文件中
final Stream<String> fileNames = Optional.ofNullable(it.getJSONArray("fileNames"))
.orElse(new JSONArray())
.stream()
.map(fileName -> exportPath + File.separator + fileName);
//压缩多个文件并转为字节数组
return zipFileToByteArray(fileNames);
})
.flatMap(data -> {
//上一个map传到这的已经是字节数组。我们直接对字节数组进行返回就行
//设置响应headers
HttpHeaders httpHeaders = new HttpHeaders();
httpHeaders.setContentDispositionFormData("Content-Disposition", "download.zip");
final ResponseEntity<Flux<DataBuffer>> body = ResponseEntity.ok()
.headers(httpHeaders)
.contentType(MediaType.APPLICATION_OCTET_STREAM)
//最后ResponseEntity中的body，则是由new DefaultDataBufferFactory().wrap包裹响应出去
.body(Flux.just(data).map(b -> new DefaultDataBufferFactory().wrap(b)));
return Mono.just(body);
});
}
/**
* 压缩多个文件并转为字节数组
*
* @param filepathList 文件路径列表
* @return {@link byte[]}
*/
@SneakyThrows
private static byte[] zipFileToByteArray(Stream<String> filepathList) {
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
ZipOutputStream zipOutputStream = new ZipOutputStream(byteArrayOutputStream);
filepathList.forEach(file -> addToZipFile(file, zipOutputStream));
zipOutputStream.close();
return byteArrayOutputStream.toByteArray();
}
/**
* 压缩某一个文件到返回的zip文件中
*
* @param fileName 文件名
* @param zos 佐斯
*/
@SneakyThrows
private static void addToZipFile(String fileName, ZipOutputStream zos){
File file = new File(fileName);
try (FileInputStream fis = new FileInputStream(file);){
//这里的fileName可以控制生成的压缩包当中的文件的嵌套层级关系
ZipEntry zipEntry = new ZipEntry(FilenameUtils.getName(fileName));
zos.putNextEntry(zipEntry);
byte[] bytes = new byte[1024];
int length;
while ((length = fis.read(bytes)) >= 0) {
zos.write(bytes, 0, length);
}
zos.closeEntry();
}
}
3.1 响应的对象为什么是Mono<ResponseEntity<Flux<DataBuffer>>>
可能会有人有疑问，有必要嵌套这么多层吗？
其实如果只有ResponseEntity<Flux<DataBuffer>> 也是可以的，但是如果你这么写那么就和传统的MVC写法一样了，我们都知道在响应式编程中，只有subscribes 的时候才会真正出发整个流的执行，然后生成元素，所以我们需要返回的是Mono<ResponseEntity> 而不是ResponseEntity<T>
接着ResponseEntity<Flux<DataBuffer>> ，有必要再包裹一层吗？
使用ResponseEntity<Flux<DataBuffer>>来包裹Flux<DataBuffer>。这是因为在处理流式数据时，通常使用Flux来表示一系列的数据块。这种方式可以异步地将数据块逐个发送到客户端，而不是等待整个响应的数据都准备好后再发送。这种异步处理可以提高性能并降低内存消耗。