数据库中的表导出成excel表格并发送给客户端

需求概述

excel相信大家都不陌生了,公司里的白领也好大学学生也好的老朋友了,今天说说后端数据库里的内容怎么导出成excel表格

技术手段

后端:Servlet,poi,MyBaits

前端:axios elementUI

啥效果?

上图

业务逻辑

整个的业务逻辑也清晰画个图清晰一些,首先需要选中数据的id(肯定有一堆)放在数组里,至于怎么实现移步elementUI怎么添加全选,如何拿选中数据?

后台首先到servlet,拿request分到doPost() or doGet()…等等吧

service调Mapper接口的方法,Mapper映射.xml文件 sql语句写在.xml里面这是最底层于数据库交互的一层

前端实现

需要一个String 字符串在Vue里面先给他new出来

data(){return{importExce: "",//实列"1,2,3" 放id}}

JS需要配合全选函数使用前面说过如何拿值就是用一个handleSelectionChange()我就不做赘述了

handleSelectionChange(v) {this.importExce = "";v.forEach((x) => {this.importExce += x.id + ",";});}

发请求

生成EXCE表格的按钮绑定onclick事件

<el-button type="info" @click="getExcl">导出Excl表格</el-button>

函数,发请求必须发同步别问为啥因为异步你得用js写IO流我说过再用js写后端我就跳楼的 flag不倒所以…不发异步请求液~

getExcl() {if (this.importExce) {window.location.href ="http://localhost:8080/student?whattodo=exce&ids=" + this.importExce;} else {alert("至少选一条");}}

后端

对我后端请求的地址大家也看见了端口是8080嘛 tomcat老朋友,whattodo是一个令牌过来个请求,拿着这个东西我分给不同的函数

第一步先在 pom.xml导入poi

<dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>4.1.0</version></dependency>

👇servlet:

String whattodo =servletRequest.getParameter("whattodo");if(whattodo.equals("exce")){this.IMPORTEXCE(res,servletRequest,servletResponse);}

没毛病吧能看懂吧 IMPORTEXCE()函数👇 这是大头

private void IMPORTEXCE(resp res, HttpServletRequest servletRequest, HttpServletResponse servletResponse) {//导入一本书Workbook wb =new XSSFWorkbook();Sheet sheet =wb.createSheet("student列表");Row header =sheet.createRow(0);header.createCell(0).setCellValue("序号");header.createCell(1).setCellValue("姓名");header.createCell(2).setCellValue("年龄");header.createCell(3).setCellValue("生日");header.createCell(4).setCellValue("学校id");header.createCell(5).setCellValue("学校名字");header.createCell(6).setCellValue("学校地址");//查数据String str =servletRequest.getParameter("ids");String[] ids =str.split(",");ArrayList<Integer> list =new ArrayList<>();for (String id : ids) {list.add(Integer.parseInt(id));}List<Student> stus =new StudentService().queryStuById(list);for(int i =0;i<stus.size();i++){Row data =sheet.createRow(i+1);data.createCell(0).setCellValue(i+1);data.createCell(1).setCellValue(stus.get(i).getName());data.createCell(2).setCellValue(stus.get(i).getAge());data.createCell(3).setCellValue(stus.get(i).getBirth());data.createCell(4).setCellValue(stus.get(i).getSchid());data.createCell(5).setCellValue(stus.get(i).getSchool().getName());data.createCell(6).setCellValue(stus.get(i).getSchool().getInfo());}//sheet就有了写出去servletResponse.setHeader("Content-Disposition","attachment;filename=stu.xlsx");try {wb.write(servletResponse.getOutputStream());} catch (IOException e) {e.printStackTrace();}finally {try {wb.close();} catch (IOException e) {e.printStackTrace();}}}

上来先new WorkBook一本数再sheet每一页 Row每一行 RowCell每一行里面每一个格上面中的一段

String str =servletRequest.getParameter("ids");String[] ids =str.split(",");ArrayList<Integer> list =new ArrayList<>();for (String id : ids) {list.add(Integer.parseInt(id));}List<Student> stus =new StudentService().queryStuById(list);

明显把前端咱们传的拿个字符串例如"1,2,3,4"这东西给变成Integer集合,集合方便嘛

接下来最大的疑点就是这里了我们往里走👇(也是上面其中调用service的一句)

new StudentService().queryStuById(list);

那么Service里面 queryStuById(ArrayList list)这个方法怎么写的?哎这里(这是我service里面的方法大家可以对应我上面画的那个图),下一步到Mapper了,没错,

public List<Student> queryStuById(ArrayList<Integer> list) {SqlSession session =SF.getConnection();try{StudentMapper dao =session.getMapper(StudentMapper.class);List<Student> result= dao.queryStuById(list);mit();return result;}catch (Exception e){e.printStackTrace();if(session!=null) session.rollback();return null;}finally {if(session!=null) session.close();}}

StudentMapper dao =session.getMapper(StudentMapper.class);//这里用到了代理类实现方法以后再说List<Student> result= dao.queryStuById(list);

我们看到Mapper去调用queryStuById(List list)这个方法了再往里走到Mapper了 Mapper是个接口哈全是抽象方法相当于制定了一套规则让service来实现

List<Student> queryStuById(@Param("list") ArrayList<Integer> list);

接下来是它去和.xml映射,.xml再和数据库去交互

<select id="queryStuById" resultMap="res_stu">select stu.age,stu.id,stu.name,stu.birth,stu.schid,sch.name schoolname, CONCAT_WS('-',pro.NAME,city.NAME,area.name,sch.info) info from student stu left join school sch on stu.schid = sch.id left join address pro on pro.id =sch.proid left join address city on city.id = sch.cityid left join address area on sch.areaid =area.id where stu.id in<foreach collection="list" item="i" open="(" close=")" separator=",">#{i}</foreach></select>

很清晰了吧,<foreach>标签循环那一套id select语句用的in查出来了一个装学生测集合再一层层往外走最终返回给servlet 从刚才断的那个地方往下走

for(int i =0;i<stus.size();i++){Row data =sheet.createRow(i+1);data.createCell(0).setCellValue(i+1);data.createCell(1).setCellValue(stus.get(i).getName());data.createCell(2).setCellValue(stus.get(i).getAge());data.createCell(3).setCellValue(stus.get(i).getBirth());data.createCell(4).setCellValue(stus.get(i).getSchid());data.createCell(5).setCellValue(stus.get(i).getSchool().getName());data.createCell(6).setCellValue(stus.get(i).getSchool().getInfo());}//sheet就有了写出去servletResponse.setHeader("Content-Disposition","attachment;filename=stu.xlsx");try {wb.write(servletResponse.getOutputStream());} catch (IOException e) {e.printStackTrace();}finally {try {wb.close();} catch (IOException e) {e.printStackTrace();}}

嗯就没啥了循环着写成一个excel表格再写出去奥注意那个返回格式

servletResponse.setHeader("Content-Disposition","attachment;filename=stu.xlsx");

这就是同步请求实现导出excel表格.