前言

本功能基于springboot和vue技术架构。

springboot后台接口编写

从数据库导出下载

首先我们会用到的一个开发工具，hutool，引入其依赖：

        <!--hutool：工具类用不起的注意升级jar包版本或者降低版本，一般都是升高--><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.0</version></dependency><!--poi:是Office文档的Java处理包，也得装上才能用--><dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>5.2.2</version></dependency>

什么是hutool：

简单来说就是一个Java开发用的工具包：

可以看见里面是有帮我们做输出Excel的功能封装的：

具体参照官方文档一步一步写就行了，直接给出接口代码：

//excel导出接口/*** 将数据库的数据全部批量导出到excel表中* @param response*/@GetMapping("/export")public void export(HttpServletResponse response) throws IOException {//先从数据库查出所有的数据List<User> list = userService.list();//我们创建Hutool给我们写好的ExcelWriteExcelWriter wirter = ExcelUtil.getWriter(true);//自定义标题别名（最后生成excel表格的名字），不然用数据库的字段名会很丑wirter.addHeaderAlias("id","序号");wirter.addHeaderAlias("username","用户名");wirter.addHeaderAlias("nickname","用户昵称");wirter.addHeaderAlias("email","用户邮箱");wirter.addHeaderAlias("phone","手机号");wirter.addHeaderAlias("address","用户住址");//数据库中的下划线自动转驼峰wirter.addHeaderAlias("createTime","更新时间");wirter.addHeaderAlias("avatarUrl","用户头像");//hutool默认的，未添加alias的属性也会写出，如果想只写出加了别名的字段，可以调用此方法排除之wirter.setOnlyAlias(true);wirter.write(list,true);//我们将输出的excel文件写出到客户端直接下载//response为HttpServletResponse对象response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");//test.xls是弹出下载对话框的文件名，不能为中文，中文请自行编码
//        response.setHeader("Content-Disposition","attachment;filename=test.xls");String fileName = URLEncoder.encode("用户信息","UTF-8");response.setHeader("Content-Disposition","attachment;filename="+fileName+".xlsx");ServletOutputStream out=response.getOutputStream();wirter.flush(out,true);//关闭wirter，释放内存wirter.close();//关机输出servlet流IoUtil.close(out);}

然后我们访问这个接口就可以拿到一个excel表格：

我这里操作时下载下来的表格中更新时间一栏是一排#号，猜测应该是Hutool的bug之一，双击之后其实就是正常的了。
但是还有一个问题，当我们想要对这个表格进行导入数据库的操作的时候，会因为该表名为中文而无法导入，所以这个时候我们有另外一种方式，来让导入导出时自动转换数据库字段名和我们的自定义名，就是在实体类中对各个字段加@Alisa(“自定义字段名”)注解(这个注解来自hutool)就可以实现：

这意味着我们刚刚的接口中的那一大段代码可以省略一些了：

//excel导出接口/*** 将数据库的数据全部批量导出到excel表中* @param response*/@GetMapping("/export")public void export(HttpServletResponse response) throws IOException {//先从数据库查出所有的数据List<User> list = userService.list();//我们创建Hutool给我们写好的ExcelWriteExcelWriter wirter = ExcelUtil.getWriter(true);wirter.write(list,true);//我们将输出的excel文件写出到客户端直接下载//response为HttpServletResponse对象response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");//test.xls是弹出下载对话框的文件名，不能为中文，中文请自行编码
//      response.setHeader("Content-Disposition","attachment;filename=test.xls");String fileName = URLEncoder.encode("用户信息","UTF-8");response.setHeader("Content-Disposition","attachment;filename="+fileName+".xlsx");ServletOutputStream out=response.getOutputStream();wirter.flush(out,true);//关闭wirter，释放内存wirter.close();//关机输出servlet流IoUtil.close(out);}

excel批量导入数据库接口实现

老办法，照着官网写喽：

//excel批量引入@PostMapping("/import")public boolean imp(MultipartFile file) throws IOException {//获取来自浏览器发送的文件内容InputStream inputStream = file.getInputStream();//这里我们不用磁盘路径这种写死的，我们使用输入流动态进行读取
//        ExcelReader reader = ExcelUtil.getReader("读取文件来源");ExcelReader reader = ExcelUtil.getReader(inputStream);List<User> all = reader.readAll(User.class);//我们再使用MP的批量插入插入到数据库中即可userService.saveBatch(all);return true;}

对于MultipartFile的解释：

vue前端实现方法编写

从数据库导出下载

绑定事件之后，直接调用window.open的api直接启用新窗口访问该下载接口即可。
什么是window.open():

excel批量导入数据库接口实现

我们使用elementui的上传文件的组件：

结合el官方文档的解释我们修改出我们需要的样式：

我们还加了一个回调函数（官方文档中提供的）：

总结

多看官方文档，官方文档才是最好的教程！

前后端分离实现excel批量导入导出功能相关推荐

Excel表格导入导出功能实现
## 01.员工管理-Excel导入功能介绍 ### 目标在前面员工的添加是一个一个进行的,如果一次性添加多个员工信息,这时候就会很繁琐因此需要我们开发一个批量导入的功能,将用户的信息存储到 ex ...
Spring MVC 实现Excel的导入导出功能(2：Excel的导入优化和Excel的导出)
Excel的导入V2优化版有些时候文件上传这一步骤由前端来处理,只将上传后的 URL 传输给后端(可以参考上一文中的图片上传功能),也就是导入请求中并不会直接处理 MultipartFile 对象, ...
前端vue Excel表格导入导出功能（纯前端）
目录第一步.安装插件第二步.导入Blob.js和Export2Excel.js,在/src/assets下新建文件第三步.导入文件第四步.导出文件第一步.安装插件 yarn add file ...
postman测试Excel文件导入导出功能
导入Excel核心代码 @ApiOperation("导入Excel")@PostMapping("/importExcel")public ActionRes ...
EasyExcel实现Excel文件导入导出功能
一.EasyExcel简介 Java领域解析.生成Excel比较有名的框架有Apache poi.jxl等.但他们都存在一个严重的问题就是非常的耗内存.如果你的系统并发量不大的话可能还行,但是一旦并发 ...
前后端分离实现图片上传的功能
由于最近开发的项目需要有上传图片的功能,并且能够让上传的图片能够在网页上预览出来.所以写下此篇文章,记录一下学习到的知识. 1,前端前端项目是采用angularjs框架搭建的.图片上传功能在前端的代 ...
视频教程-Python+Vue+Django前后端分离项目实战-Python
Python+Vue+Django前后端分离项目实战教学风格独特,以学员视角出发设计课程,难易适度,重点突出,架构清晰,将实战经验融合到教学中.讲授技术同时传递方法.得到广大学员的高度认可. 王进 ...
基于springboot2.0跟layui构建的前后端分离后台管理系统
Active4j-boot是基于SpingBoot2.0轻量级的java快速开发框架.以Spring Framework为核心容器,Spring MVC为模型视图控制器,Mybatis Plus为数据 ...
学科投票系统-基于Python-Django实现的前后端分离项目
学科投票系统-基于Python-Django实现的前后端分离开发作者:代昌松项目详情代码请参考: vote_api:https://gitee.com/dcstempt_ping/vote_api ...
Java项目:前后端分离疫情防疫平台设计和实现(java+springmvc+VUE+node.js+mybatis+mysql+springboot+redis+jsp)
源码获取:博客首页 "资源" 里下载! 主要技术:Java.springmvc.VUE.node.js.mybatis.mysql.tomcat.jquery.layui.boot ...

前后端分离实现excel批量导入导出功能

前言

springboot后台接口编写

从数据库导出下载

excel批量导入数据库接口实现

vue前端实现方法编写

从数据库导出下载

excel批量导入数据库接口实现

总结

前后端分离实现excel批量导入导出功能相关推荐

最新文章

热门文章