使用POI设计一个限制导出日期为三十天，且导出文件为excel，前端使用Vue的element ui进行设计，前端可以通过选择时间来导出具体的表格数据，根据用户选择的时间进行Excel文件的数据导出。
按照需求来设计代码，根据element ui对前端代码进行设计。

后端使用 Java，依赖 Apache POI 库。前端使用 Vue 框架和 Element UI 库。

后端 Java 代码：

import org.apache.poi.ss.usermodel.*;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.springframework.web.bind.annotation.*;import java.io.FileOutputStream;
import java.time.LocalDate;
import java.time.format.DateTimeFormatter;
import java.util.ArrayList;
import java.util.List;@RestController
@RequestMapping("/export")
public class ExcelExportController {@PostMapping("/data")public String exportExcel(@RequestBody ExportRequestDto exportRequestDto) {LocalDate startDate = exportRequestDto.getStartDate();LocalDate endDate = exportRequestDto.getEndDate();// 模拟从数据库或其他数据源获取数据List<ExcelData> data = fetchDataFromDataSource(startDate, endDate);Workbook workbook = new XSSFWorkbook();Sheet sheet = workbook.createSheet("Data");// 创建表头Row headerRow = sheet.createRow(0);headerRow.createCell(0).setCellValue("ID");headerRow.createCell(1).setCellValue("Name");// 填充数据int rowNum = 1;for (ExcelData item : data) {Row row = sheet.createRow(rowNum++);row.createCell(0).setCellValue(item.getId());row.createCell(1).setCellValue(item.getName());}// 导出文件String filePath = "path/to/your/file.xlsx";try (FileOutputStream outputStream = new FileOutputStream(filePath)) {workbook.write(outputStream);} catch (Exception e) {e.printStackTrace();}return filePath;}private List<ExcelData> fetchDataFromDataSource(LocalDate startDate, LocalDate endDate) {// 模拟从数据库或其他数据源查询数据// 返回符合日期范围的数据列表List<ExcelData> dummyData = new ArrayList<>();// ... 查询数据库或数据源 ...return dummyData;}// 数据对象类private static class ExcelData {private int id;private String name;public ExcelData(int id, String name) {this.id = id;this.name = name;}// getter 和 setter 方法省略...}
}

在上述代码中，我们使用了 Spring Boot 的注解 @RestController 和 @RequestMapping 来创建一个简单的后端控制器。ExportRequestDto 是一个包含开始日期和结束日期的请求数据对象。

<template><div><el-date-pickerv-model="startDate"type="date"placeholder="选择开始日期"></el-date-picker><el-date-pickerv-model="endDate"type="date"placeholder="选择结束日期"></el-date-picker><el-button @click="exportData">导出 Excel</el-button></div>
</template><script>
import axios from "axios";export default {data() {return {startDate: "",endDate: "",};},methods: {exportData() {const exportRequest = {startDate: this.startDate,endDate: this.endDate,};axios.post("/export/data", exportRequest, {responseType: "blob",}).then((response) => {const url = window.URL.createObjectURL(new Blob([response.data]));const link = document.createElement("a");link.href = url;link.setAttribute("download", "exported_data.xlsx");document.body.appendChild(link);link.click();document.body.removeChild(link);});},},
};
</script>

好的，页面我们也创建好了，接下来，我们利用当前页面来实现对需要导出的文件在前端页面上进行限制，在上述代码中，我们使用了 Vue 的 Element UI 库，用el-date-picker组件让用户选择开始日期和结束日期。el-button 组件绑定了 exportData 方法，并通过 Axios 发送 POST 请求到后端的 /export/data 路由，请求的数据包括开始日期和结束日期。

后端接收到请求后，根据日期范围从数据库或其他数据源获取对应的数据，并使用 Apache POI 创建并填充 Excel 文件。最后，将文件保存到指定路径，并通过响应返回文件路径。

前端通过 Axios 的 responseType: "blob" 设置响应类型为二进制流，接收到响应后将二进制流转换为下载链接，并触发下载操作。

在上述前端Vue界面中做限制，限制选择的开始时间到结束时间为30天,且开始时间不能大于结束时间

<template><div><el-date-pickerv-model="startDate"type="date"placeholder="选择开始日期":picker-options="pickerOptions"@input="handleStartDateChange"></el-date-picker><el-date-pickerv-model="endDate"type="date"placeholder="选择结束日期":picker-options="pickerOptions":disabled="startDate === ''" // 禁用结束日期输入框，直到选择了开始日期></el-date-picker><el-button :disabled="!isDateRangeValid" @click="exportData">导出 Excel</el-button></div>
</template><script>
import axios from "axios";export default {data() {return {startDate: "",endDate: "",pickerOptions: {disabledDate: (time) => {// 禁用当前日期之后的日期const today = new Date();today.setHours(0, 0, 0, 0);return time.getTime() > today.getTime();},},};},computed: {isDateRangeValid() {// 验证日期范围是否合法，开始日期不能大于结束日期且不超过30天if (!this.startDate || !this.endDate) {return false; // 如果开始日期或结束日期为空，返回 false}const startDate = new Date(this.startDate);const endDate = new Date(this.endDate);const timeDiff = endDate.getTime() - startDate.getTime();const daysDiff = timeDiff / (1000 * 3600 * 24); // 计算天数差值return startDate <= endDate && daysDiff <= 30;},},methods: {handleStartDateChange() {// 验证开始日期和结束日期if (this.startDate && this.endDate) {const startDate = new Date(this.startDate);const endDate = new Date(this.endDate);if (startDate > endDate) {// 如果开始日期大于结束日期，重置结束日期this.endDate = "";} else {const timeDiff = endDate.getTime() - startDate.getTime();const daysDiff = timeDiff / (1000 * 3600 * 24); // 计算天数差值if (daysDiff > 30) {// 如果日期范围超过30天，重置结束日期this.endDate = "";}}}},exportData() {// 导出数据逻辑，同上},},
};
</script>

在上述代码中，我们添加了一个 isDateRangeValid 计算属性来验证日期范围是否合法，开始日期不能大于结束日期。我们在 isDateRangeValid 计算属性中添加了额外的验证逻辑来确保日期范围不超过30天。我们计算了开始日期和结束日期之间的天数差值，并通过比较此差值和30来验证日期范围是否合法。

在 handleStartDateChange 方法中，我们在验证开始日期和结束日期的基础上，还验证了日期范围是否超过30天。如果日期范围大于30天，我们会将结束日期重置为空，以确保选择的日期范围是有效的。
请在你的实际项目中进行适当的测试和调整。同样，前端验证只是提供用户友好的提示，后端也应该进行相应的验证，以确保数据的完整性和安全性。