Spring Boot+AngularJS导出excel
2016-09-06 09:04
405 查看
这次在项目开发中,需要实现考题导出,由于本项目是使用Spring Boot+AngularJs的开发模式,原来那种表单式的请求方式不是很便捷,以下是基于AngularJs异步请求的代码。
首先是JS代码
function exportExam() {
$http({
url: url + "export",
responseType: 'arraybuffer'
}).success(function (res) {
var blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;"});
//var blob = new Blob([res], {type: "application/octet-stream"}); 这种类型的转换同样可行
saveAs(blob, "考题信息.xlsx");
});
}
这里需要注意三点:1、要在http的请求中将responseType设置为‘arraybuffer’类型,因为后台会将生成的excel转换成Byte数组并传送到前台
2、经过博主测试,Blob的类型为以上两种都可以
3、为了更好的兼容浏览器,我们在这里使用了saveAs方法,这个方法是file-saver这个插件提供的
后台代码
public byte[] export(Integer[] idlist, int[] isoutput,
String[] title) throws IOException {
Map model = new HashMap();
model.put("excelName", "考题信息.xlsx");
model.put("sheetName", "sheet1");
model.put("title", title);
if (idlist == null || idlist.length == 0)
model.put("list", repo.findAll());
else {
List<Integer> ids = new ArrayList<Integer>();
for (int i = 0; i < idlist.length; i++)
ids.add(idlist[i]);
model.put("list", repo.findAll(ids));
}
model.put("isoutput", isoutput);
XSSFWorkbook book = new XSSFWorkbook();
XSSFSheet sheet = book.createSheet(model.get("sheetName").toString());
XSSFRow header = sheet.createRow(0);
// 产生标题列
int j = 0;
for (int i = 0; i < title.length; i++) {
if (isoutput[i] == 1) header.createCell(j++).setCellValue(title[i]);
}
int rowNum = 1;
for (Exam exam : (List<Exam>) model.get("list")) {
j = 0;
XSSFRow row = sheet.createRow(rowNum++);
if (isoutput[0] == 1) {
row.createCell(j).setCellValue(exam.getTest());
j++;
}
if (isoutput[1] == 1) {
row.createCell(j).setCellValue(exam.getOp1());
j++;
}
if (isoutput[2] == 1) {
row.createCell(j).setCellValue(exam.getOp2());
j++;
}
if (isoutput[3] == 1) {
row.createCell(j).setCellValue(exam.getOp3());
j++;
}
if (isoutput[4] == 1) {
row.createCell(j).setCellValue(exam.getOp4());
j++;
}
if (isoutput[5] == 1) {
row.createCell(j).setCellValue(exam.getAnswer());
j++;
}
if (isoutput[6] == 1) {
row.createCell(j).setCellValue(exam.getTotal());
j++;
}
if (isoutput[7] == 1) {
row.createCell(j).setCellValue(exam.gettotalCorrect());
j++;
}
if (isoutput[8] == 1) {
row.createCell(j).setCellValue(
(double) exam.gettotalCorrect() / exam.getTotal());
j++;
}
}
ByteArrayOutputStream output = new ByteArrayOutputStream();
book.write(output);
byte[] b = output.toByteArray();
return b;
}
由于这部分代码经过各种修改,还没有整理好,这里大概说下思路。首先上半部分是查询后台数据并生成xlsx文件,也就是book对象;然后book.write方法将book转化为ByteArraryOutputStream,由于异步请求是通过Json来与前台交互的,因此不能直接传输ByteArraryOutputStream,所以有将它转换为byte数组。
以上是主要代码,经测试,该文件导出功能在Chrome、IE、猎豹浏览器中都能正常导出。
首先是JS代码
function exportExam() {
$http({
url: url + "export",
responseType: 'arraybuffer'
}).success(function (res) {
var blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;"});
//var blob = new Blob([res], {type: "application/octet-stream"}); 这种类型的转换同样可行
saveAs(blob, "考题信息.xlsx");
});
}
这里需要注意三点:1、要在http的请求中将responseType设置为‘arraybuffer’类型,因为后台会将生成的excel转换成Byte数组并传送到前台
2、经过博主测试,Blob的类型为以上两种都可以
3、为了更好的兼容浏览器,我们在这里使用了saveAs方法,这个方法是file-saver这个插件提供的
后台代码
public byte[] export(Integer[] idlist, int[] isoutput,
String[] title) throws IOException {
Map model = new HashMap();
model.put("excelName", "考题信息.xlsx");
model.put("sheetName", "sheet1");
model.put("title", title);
if (idlist == null || idlist.length == 0)
model.put("list", repo.findAll());
else {
List<Integer> ids = new ArrayList<Integer>();
for (int i = 0; i < idlist.length; i++)
ids.add(idlist[i]);
model.put("list", repo.findAll(ids));
}
model.put("isoutput", isoutput);
XSSFWorkbook book = new XSSFWorkbook();
XSSFSheet sheet = book.createSheet(model.get("sheetName").toString());
XSSFRow header = sheet.createRow(0);
// 产生标题列
int j = 0;
for (int i = 0; i < title.length; i++) {
if (isoutput[i] == 1) header.createCell(j++).setCellValue(title[i]);
}
int rowNum = 1;
for (Exam exam : (List<Exam>) model.get("list")) {
j = 0;
XSSFRow row = sheet.createRow(rowNum++);
if (isoutput[0] == 1) {
row.createCell(j).setCellValue(exam.getTest());
j++;
}
if (isoutput[1] == 1) {
row.createCell(j).setCellValue(exam.getOp1());
j++;
}
if (isoutput[2] == 1) {
row.createCell(j).setCellValue(exam.getOp2());
j++;
}
if (isoutput[3] == 1) {
row.createCell(j).setCellValue(exam.getOp3());
j++;
}
if (isoutput[4] == 1) {
row.createCell(j).setCellValue(exam.getOp4());
j++;
}
if (isoutput[5] == 1) {
row.createCell(j).setCellValue(exam.getAnswer());
j++;
}
if (isoutput[6] == 1) {
row.createCell(j).setCellValue(exam.getTotal());
j++;
}
if (isoutput[7] == 1) {
row.createCell(j).setCellValue(exam.gettotalCorrect());
j++;
}
if (isoutput[8] == 1) {
row.createCell(j).setCellValue(
(double) exam.gettotalCorrect() / exam.getTotal());
j++;
}
}
ByteArrayOutputStream output = new ByteArrayOutputStream();
book.write(output);
byte[] b = output.toByteArray();
return b;
}
由于这部分代码经过各种修改,还没有整理好,这里大概说下思路。首先上半部分是查询后台数据并生成xlsx文件,也就是book对象;然后book.write方法将book转化为ByteArraryOutputStream,由于异步请求是通过Json来与前台交互的,因此不能直接传输ByteArraryOutputStream,所以有将它转换为byte数组。
以上是主要代码,经测试,该文件导出功能在Chrome、IE、猎豹浏览器中都能正常导出。
相关文章推荐
- 微服务框架Spring Cloud介绍 Part2: Spring Cloud与微服务
- angular.element方法汇总
- 深入学习JavaScript的AngularJS框架中指令的使用方法
- 仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
- Angular用来控制元素的展示与否的原生指令介绍
- Angular 页面跳转时传参问题
- 全面解析Angular中$Apply()及$Digest()的区别
- Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
- 使用angular写一个hello world
- vue,angular,avalon这三种MVVM框架优缺点
- 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
- Angular懒加载机制刷新后无法回退的快速解决方法
- 简述angular自定义过滤器在页面和控制器中的使用
- AngularJS页面访问时出现页面闪烁问题的解决
- Angular设置title信息解决SEO方面存在问题
- 利用CSS3在Angular中实现动画
- 浅谈angular懒加载的一些坑
- 初识angular框架后的所思所想
- 实例剖析AngularJS框架中数据的双向绑定运用
- 理解Angular数据双向绑定