spring+angular实现导出excel的实现代码


Posted in Javascript onFebruary 27, 2019

需求描述

要求批量导出数据,以excel的格式。

选择方式

前台 + 后台

之前在别的项目中也遇到过导出的问题,解决方式是直接在前台导出将表格导出。

这次没有选择前台导出的方式,是由于需要导出所有的数据,所以考虑直接在后台获取所有的数据,然后就直接导出,最后前台触发导出API。

后台实现

导出使用的是POI,在上一篇文章中,我已做了基本的介绍,这里就不做介绍配置了,参照:POI实现将导入Excel文件

创建表格

首先先建立一张表,这里要建立.xlsx格式的表格,使用XSSFWorkbook:

Workbook workbook = new XSSFWorkbook();
Sheet sheet = workbook.createSheet("new sheet");

接着创建表格的行和单元格:

Row row = sheet.createRow(0);
row.createCell(0);

然后设置表头:

row.createCell(0).setCellValue("学号");
row.createCell(1).setCellValue("姓名");
row.createCell(2).setCellValue("手机号码");

最后获取所有的数据,对应的填写到单元格中:

int i = 1;
for (Student student : studentList) {
  row = sheet.createRow(i);
  row.createCell(0).setCellValue(student.getStudentNumber());
  row.createCell(1).setCellValue(student.getName());
  row.createCell(2).setCellValue(student.getPhoneNumber());
  i++;
}

输出

这部分是纠结比较久的,反复试了很多次。

一开始是直接以文件输出流的形式输出的:

FileOutputStream output = new FileOutputStream("test.xlsx");
workbook.write(output);

这样可以正确生成文件,但是问题是,它会生成在项目的根目录下。

而我们想要的效果是,下载在本地自己的文件夹中。

要解决这个问题,需要添加相应信息,返回给浏览器:

OutputStream fos = response.getOutputStream();
response.reset();
String fileName = "test";
fileName = URLEncoder.encode(fileName, "utf8");
response.setHeader("Content-disposition", "attachment;filename="+ fileName+".xlsx");

response.setCharacterEncoding("UTF-8");
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
workbook.write(fos);
fos.close();

后台完成代码:

public void batchExport(HttpServletResponse response) {
  logger.debug("创建工作表");
  Workbook workbook = new XSSFWorkbook();
  Sheet sheet = workbook.createSheet("new sheet");

  logger.debug("获取所有学生");
  List<Student> studentList = (List<Student>) studentRepository.findAll();

  logger.debug("建立表头");
  Row row = sheet.createRow(0);
  row.createCell(0).setCellValue("学号");
  row.createCell(1).setCellValue("姓名");
  row.createCell(2).setCellValue("手机号码");

  logger.debug("将学生信息写入对应单元格");
  int i = 1;
  for (Student student : studentList) {
    row = sheet.createRow(i);
    row.createCell(0).setCellValue(student.getStudentNumber());
    row.createCell(1).setCellValue(student.getName());
    row.createCell(2).setCellValue(student.getPhoneNumber()); 
    i++;
  }

  OutputStream fos;
  try {
    fos = response.getOutputStream();
    response.reset();
    String fileName = "test";
    fileName = URLEncoder.encode(fileName, "utf8");
    response.setHeader("Content-disposition", "attachment;filename="+ fileName+".xlsx");

    response.setCharacterEncoding("UTF-8");
    response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");// 设置contentType为excel格式
    workbook.write(fos);
    fos.close();

  } catch (Exception e) {
      e.printStackTrace();
  }
}

前台实现

在前台调用的时候,也经历了多次失败,google了很多篇文章,各种各样的写法都有,自己也是试了试,前台后台都对照做了很多尝试,但基本都是有问题的。这里我值给出我最后选择配套后台的方法。

// 后台导出路由
const exportUrl = '/api/student/batchExport';

// 创建a标签,并点击
let a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display:none');
a.setAttribute('href', exportUrl);
a.click();
URL.revokeObjectURL(exportUrl);

最后的实现还是一种比较简单的方法,创建了一个a标签,然后隐式点击。

注意到这里我没有使用http请求,主要是他并不能触发浏览器的下载,在发起请求后,并没有正确的生成文件,具体是什么还不清楚。后面弄明白后我会再更新这篇文章。

升级

上面的形式,在导出所有的数据的时候是没有问题的,但是如果我想带一些参数呢?

另外,我们的项目是建立在nginx同源的基础上,一旦出现跨域问题,前台向后台请求,浏览器是不会默认携带Cookie的,每次请求都将会被看作是一个新的请求。

所以上面的解决办法有所限制。

那么,还可以怎么写呢?

file-saver

这里我将借助FileSaver来帮助我在前台生成excel文件。

this.http.get('student/batchExport', { responseType: 'blob'})
  .subscribe(data => {
    let blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
    saveAs(blob, 'test.xlsx');
  });

用httpClient发起get请求,声明:响应类型为blob。

blob是一个用来存储二进制文件的对象。

然后创建一个blob对象,类型为excel格式。

最后,利用file-saver中的saveAs函数,将blob对象生成文件名为'test.xlsx'的excel文件。

调整后台

这里后台大部分和前面的是一样的,但是明眼人会发现,前台使用后面的方法后,下面的代码就多余了:

String fileName = "test";
fileName = URLEncoder.encode(fileName, "utf8");
response.setHeader("Content-disposition", "attachment;filename="+ fileName+".xlsx");

response.setCharacterEncoding("UTF-8");
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");

是的,我们将这一部分交由前台负责,所以后台对应的这部分就可以删除了,只使用response获取输出流就可以了:

OutputStream fos = response.getOutputStream();
workbook.write(fos);
fos.close();

好了,使用这种方法,我们就可以在发起http请求的时候,添加我们想要的参数了。

总结

我们在google的时候,很多时候,我们并不能一下子就找到我们想要的东西,但是并不是说这在做无用功,因为我们往往会在一些类似的文章中找到灵感。

所以,当我们没有直接找到我们想要的结果的时候,不妨大胆的做一些尝试,因为我们会在一次又一次失败的尝试中,慢慢的了解问题的原理到底是怎么回事。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
JavaScript prototype对象的属性说明
Mar 13 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
node中的session的具体使用
Sep 14 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 #Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 #Javascript
小程序hover-class点击态效果实现
Feb 26 #Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 #Javascript
vue使用Font Awesome的方法步骤
Feb 26 #Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 #Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 #Javascript
You might like
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
php实现json编码的方法
2015/07/30 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
Python中的包和模块实例
2014/11/22 Python
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
python Tkinter的图片刷新实例
2019/06/14 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
python线程里哪种模块比较适合
2020/08/02 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
实习生自我评价
2014/01/18 职场文书
高中生物教学反思
2014/02/05 职场文书
报关专员求职信范文
2014/02/22 职场文书
小区文明倡议书
2014/05/16 职场文书
车间安全生产标语
2014/06/06 职场文书
师德承诺书
2015/01/20 职场文书
合作与交流自我评价
2015/03/09 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL