前言
本功能基于springboot和vue技术架构。
springboot后台接口编写
从数据库导出下载
首先我们会用到的一个开发工具,hutool,引入其依赖:
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.8.0</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>5.2.2</version>
</dependency>
什么是hutool: 简单来说就是一个Java开发用的工具包:
可以看见里面是有帮我们做输出Excel的功能封装的: 具体参照官方文档一步一步写就行了,直接给出接口代码:
@GetMapping("/export")
public void export(HttpServletResponse response) throws IOException {
List<User> list = userService.list();
ExcelWriter wirter = ExcelUtil.getWriter(true);
wirter.addHeaderAlias("id","序号");
wirter.addHeaderAlias("username","用户名");
wirter.addHeaderAlias("nickname","用户昵称");
wirter.addHeaderAlias("email","用户邮箱");
wirter.addHeaderAlias("phone","手机号");
wirter.addHeaderAlias("address","用户住址");
wirter.addHeaderAlias("createTime","更新时间");
wirter.addHeaderAlias("avatarUrl","用户头像");
wirter.setOnlyAlias(true);
wirter.write(list,true);
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
String fileName = URLEncoder.encode("用户信息","UTF-8");
response.setHeader("Content-Disposition","attachment;filename="+fileName+".xlsx");
ServletOutputStream out=response.getOutputStream();
wirter.flush(out,true);
wirter.close();
IoUtil.close(out);
}
然后我们访问这个接口就可以拿到一个excel表格: 我这里操作时下载下来的表格中更新时间一栏是一排#号,猜测应该是Hutool的bug之一,双击之后其实就是正常的了。 但是还有一个问题,当我们想要对这个表格进行导入数据库的操作的时候,会因为该表名为中文而无法导入,所以这个时候我们有另外一种方式,来让导入导出时自动转换数据库字段名和我们的自定义名,就是在实体类中对各个字段加@Alisa(“自定义字段名”)注解(这个注解来自hutool)就可以实现: 这意味着我们刚刚的接口中的那一大段代码可以省略一些了:
@GetMapping("/export")
public void export(HttpServletResponse response) throws IOException {
List<User> list = userService.list();
ExcelWriter wirter = ExcelUtil.getWriter(true);
wirter.write(list,true);
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
String fileName = URLEncoder.encode("用户信息","UTF-8");
response.setHeader("Content-Disposition","attachment;filename="+fileName+".xlsx");
ServletOutputStream out=response.getOutputStream();
wirter.flush(out,true);
wirter.close();
IoUtil.close(out);
}
excel批量导入数据库接口实现
老办法,照着官网写喽:
@PostMapping("/import")
public boolean imp(MultipartFile file) throws IOException {
InputStream inputStream = file.getInputStream();
ExcelReader reader = ExcelUtil.getReader(inputStream);
List<User> all = reader.readAll(User.class);
userService.saveBatch(all);
return true;
}
对于MultipartFile的解释:
vue前端实现方法编写
从数据库导出下载
绑定事件之后,直接调用window.open的api直接启用新窗口访问该下载接口即可。 什么是window.open():
excel批量导入数据库接口实现
我们使用elementui的上传文件的组件: 结合el官方文档的解释我们修改出我们需要的样式: 我们还加了一个回调函数(官方文档中提供的):
总结
多看官方文档,官方文档才是最好的教程!
|