elementUI+Springboot实现导出excel功能的全过程

下面我将详细讲解如何使用ElementUI和Springboot实现导出excel功能的全过程。

第一步：搭建环境

1.1 安装Node.js和npm

在使用ElementUI之前，你需要先安装Node.js和npm。你可以在官网上下载Node.js的安装包，然后安装完成之后就可以通过npm来安装ElementUI依赖了。

1.2 导入ElementUI

你可以通过npm来安装ElementUI依赖，可以参考以下命令：

npm install element-ui --save

安装完成后，在项目中引入ElementUI即可开始使用。

1.3 安装Springboot

安装完成npm和ElementUI之后，你就可以开始安装Springboot。你可以在官网上下载Springboot的安装包，并按照官方文档进行安装。

第二步：编写代码

我们需要编写前端代码和后端代码来实现导出excel功能。

2.1 编写前端代码

在前端代码中，我们需要使用ElementUI来搭建界面，然后通过axios来与后端进行数据交互。

以下是一个简单的例子，假设我们需要导出一个用户列表：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="性别" prop="gender"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
    </el-table>
    <el-button @click="exportExcel">导出Excel</el-button>
  </div>
</template>

<script>
import axios from 'axios';
import { Message } from 'element-ui';
export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    async fetchData() {
      try {
        const { data } = await axios.get('/users');
        this.tableData = data;
      } catch (error) {
        console.error(error);
        Message.error('数据加载失败！');
      }
    },
    async exportExcel() {
      try {
        await axios.get('/users/export', {
          responseType: 'blob',
        });
      } catch (error) {
        console.error(error);
        Message.error('导出Excel失败！');
      }
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

上述代码中，我们使用了el-table来展示用户列表，然后通过el-button来触发导出excel操作。fetchData方法通过axios从后端接口获取数据，exportExcel方法则是一个异步方法，通过axios.get获取到导出的excel文件。

2.2 编写后端代码

在后端代码中，我们需要使用POI库来生成excel文件，并将生成的文件通过HttpResponse对象返回到前端。

以下是一个简单的例子，假设用户数据存储在数据库中：

@GetMapping("/export")
public void export(HttpServletResponse response) throws Exception {
  // 获取用户数据
  List<User> userList = userService.findAll();
  // 创建工作簿
  XSSFWorkbook workbook = new XSSFWorkbook();
  // 创建工作表
  XSSFSheet sheet = workbook.createSheet("用户列表");
  // 创建表头
  XSSFRow header = sheet.createRow(0);
  header.createCell(0).setCellValue("姓名");
  header.createCell(1).setCellValue("年龄");
  header.createCell(2).setCellValue("性别");
  header.createCell(3).setCellValue("地址");
  // 填充数据
  for (int i = 0; i < userList.size(); i++) {
    XSSFRow row = sheet.createRow(i + 1);
    User user = userList.get(i);
    row.createCell(0).setCellValue(user.getName());
    row.createCell(1).setCellValue(user.getAge());
    row.createCell(2).setCellValue(user.getGender());
    row.createCell(3).setCellValue(user.getAddress());
  }
  // 返回excel文件
  response.setContentType("application/vnd.ms-excel");
  response.setHeader("Content-disposition", "attachment;filename=userlist.xlsx");
  OutputStream outputStream = response.getOutputStream();
  workbook.write(outputStream);
  outputStream.flush();
  outputStream.close();
}

上述代码中，我们使用XSSFWorkbook来创建工作簿，XSSFSheet来创建工作表，然后填充数据，并将生成的excel文件通过response返回到前端。

第三步：测试功能

你需要启动Springboot应用程序，然后在浏览器中打开前端页面，可以看到展示用户列表的表格和导出Excel的按钮。点击导出Excel按钮，即可在浏览器中下载到生成的Excel文件。

示例说明

1. 示例一：使用Java Stream API过滤数据

在前端代码中，我们可以通过修改fetchData方法来使用axios向后端发送一个get请求，获取用户列表数据：

async fetchData() {
  try {
    const { data } = await axios.get('/users');
    // 过滤数据
    data = data.filter(item => item.age > 18);
    this.tableData = data;
  } catch (error) {
    console.error(error);
    Message.error('数据加载失败！');
  }
},

在后端代码中，我们可以使用Java Stream API来过滤数据：

@GetMapping
public List<User> findAll() {
  List<User> userList = userService.findAll();
  // 使用Java Stream API过滤数据
  return userList.stream()
      .filter(user -> user.getAge() > 18)
      .collect(Collectors.toList());
}

1. 示例二：使用注解验证请求参数

在后端代码中，我们可以使用@Valid注解来验证请求参数：

@GetMapping
public List<User> findAll(@Valid UserQuery query) {
  List<User> userList = userService.findAll();
  // 过滤数据
  if (query.getMinAge() != null) {
    userList = userList.stream()
        .filter(user -> user.getAge() >= query.getMinAge())
        .collect(Collectors.toList());
  }
  if (query.getMaxAge() != null) {
    userList = userList.stream()
        .filter(user -> user.getAge() <= query.getMaxAge())
        .collect(Collectors.toList());
  }
  return userList;
}

上述代码中，我们使用@Valid注解来验证UserQuery对象中的请求参数。如果请求参数校验不通过，会抛出MethodArgumentNotValidException异常，并返回给前端一个包含校验信息的响应实体。

这就是使用ElementUI和Springboot实现导出excel功能的全过程。在实际开发中，你需要根据自己的需求进行定制，但这种方式可以有效地提高数据导出的效率和可靠性。