概述
Ajax导出文件
- 文件导出方式
- 前言：
- 1.BASE64配合BLOB实现（不需要使用form表单）
- 2.form表单提交的方式处理（简单，适用性略差）
- 总结
文件导出方式
前言：
因为在项目中涉及到了数据导出的问题，于是想通过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上传的时候导出，第一种就配上用场了。
最后
以上就是紧张小猫咪为你收集整理的Ajax导出文件文件导出方式的全部内容，希望文章能够帮你解决Ajax导出文件文件导出方式所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
![C++库研究笔记［1] Profile->程序执行时间统计](/uploads/reation/bcimg7.png)
![监测程序的运行状况，内存和CPU使用情况[转]](/uploads/reation/bcimg12.png)
发表评论 取消回复