java spring boot +vue把数据导出到Excel

 

controller 中

@GetMapping("/export")
    public void export(HttpServletResponse response) throws IOException {

        List<Map<String, Object>> list = CollUtil.newArrayList();

        List<Student> all = studentService.list();
//        从userList集合中，依次取出一个对象
        for (Student student : all) {

            Map<String, Object> row1 = new LinkedHashMap<>();
            row1.put("编号", student.getId());
            row1.put("姓名", student.getName());
            row1.put("性别", student.getGender());
            row1.put("班级", student.getClazz());
            row1.put("专业", student.getMajor());


            list.add(row1);
        }

        // 2. 写excel
        ExcelWriter writer = ExcelUtil.getWriter(true);
        writer.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();

        writer.flush(out, true);

        writer.close();

        IoUtil.close(System.out);
    }

vue文件中

1.方法

        methods: {
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            logout() {
                $.get("/user/logout");
                sessionStorage.removeItem("user");
                location.href = "/page/end/login.html";
            },
            loadTable() {
                $.get(urlBase + "/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.search).then(res => {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })
            },
            exp() {
                window.open(urlBase + "/export");
            },

2.按钮

  <el-button @click="exp" type="primary" size="mini" style="margin: 10px 0">
                    导出
                </el-button>

效果

数据库文件

导出的文件