数据库中的表导出成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);
            session.commit();
            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表格.

总结

原创不易 看完给个赞么么哒~