文件导出方式
前言:
因为在项目中涉及到了数据导出的问题,于是想通过Ajax请求后端,通过Response返回流的形式来实现文件的导出功能…
由于原生的Ajax支持的数据返回类型dataType类型有三种:text,json,xml,不能返回流,所以无法实现【文件导出】功能。于是只能通过Form表单提交的方式进行导出,虽然看起来笨拙了些,但是效果还是很好的…,但是后来又碰到了一个坑爹的情况,业务需求是在上传的同时实现导出,而我们使用的上传插件是Dropzone,这个插件的上传请求和AJAX一样,都是不支持【流】的形式返回数据。所以form表单提交的方式再用来就很蛋疼了。在经过研究之后,发现可以通过BASE64转码和BLOB来实现文件的导出。具体如下
1.BASE64配合BLOB实现(不需要使用form表单)
思路:既然AJAX不能返回【流】,那么就把【流】转成字符串,再在前端进行处理,反正数据没有丢失,肯定是可以下载的。前端代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
</head>
<body>
<div style="text-align: center">
<button type="button" class="btn btn-success" onclick="ajaxExportFileTest(this)">ajax导出文件测试</button>
</div>
<script type="text/javascript">
/**
* AJAX导出文件测试
* @param obj
*/
function ajaxExportFileTest(obj) {
$.ajax({
url : "ajaxExportFileTest",
type : "post",
success : function (result) {
if (result){
let filename = "ceshi.xlsx";
let blob = getBlob(result,{type: "application/vnd.ms-excel"});
let isDown = true;
let url = downloadBlob(filename,blob,isDown);
console.log(url);
}
}
});
}
/**
* 获取Blob
* @param base64 base64字符串
* @param contentType 导出格式 MIME 类型
* @param sliceSize 分割大小
* @returns {Blob}
*/
function getBlob(base64, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
let byteCharacters = atob(base64);
let byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
let slice = byteCharacters.slice(offset, offset + sliceSize);
let byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
let byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
return new Blob(byteArrays, {type: contentType});
}
/**
* 下载文件
* @param fileName 文件名
* @param blob BLOB对象
* @param isDown 是否下载,默认不下载
* @returns {string} 返回url
*/
function downloadBlob(fileName, blob,isDown){
//默认不下载,返回url
//判断是直接下载还是返回对应的URL
let url = URL.createObjectURL(blob);
if (isDown){
//如果是直接下载,利用a标签来实现下载
let docEle = document;
let link = docEle.createElement("a");
link.innerHTML = fileName;
link.download = fileName;
link.href = url;
docEle.getElementsByTagName("body")[0].appendChild(link);
link.click();
$(link).remove();
}
return url;
}
</script>
</body>
</html>
后端代码如下:
@Service
public class TestService {
/**
* 根据byte 数组获取BASE64字符串
* @param bytes
* @return
*/
public String getFileBase64Str(byte [] bytes){
BASE64Encoder encoder = new BASE64Encoder();
return encoder.encodeBuffer(bytes);
}
/**
* 创建一个Excel 转换成BASE64字符串,返回出去
* @return
*/
public String exportExcelFileBase64Str(){
//创建workbook对象
SXSSFWorkbook workbook = new SXSSFWorkbook(100);
SXSSFSheet sheet = workbook.createSheet();
SXSSFRow titleRow = sheet.createRow(0);
titleRow.createCell(0).setCellValue(111);
titleRow.createCell(1).setCellValue(222);
titleRow.createCell(2).setCellValue(333);
titleRow.createCell(3).setCellValue(444);
titleRow.createCell(4).setCellValue(555);
//创建输出流
ByteArrayOutputStream output = new ByteArrayOutputStream();
try {
workbook.write(output);
} catch (IOException e) {
e.printStackTrace();
}
return getFileBase64Str(output.toByteArray());
}
}
/**
* @author phacxj
*/
@Controller
public class TestController {
@Autowired
TestService testService;
@PostMapping("ajaxExportFileTest")
@ResponseBody
public String ajaxExportFileTest(){
return testService.exportExcelFileBase64Str();
}
2.form表单提交的方式处理(简单,适用性略差)
思路:这种方式导出数据很简单,但是不能很好的监听导出(但可以通过COOKIE设置判断进行监听)
$("<form action='url' method='post' style='display: none'></form>").appendTo('body').submit().remove();
总结
在简单的导出,不需要ajax和监听文件是否导出的情况下,可以使用第二种。如果必须要ajax,或者使用类似Dropzone上传的时候导出,第一种就配上用场了。