定制网站建设广告,朝阳区seo搜索引擎优化怎么样,物流公司查询平台,国外图床 wordpress使用POI设计一个限制导出日期为三十天#xff0c;且导出文件为excel#xff0c;前端使用Vue的element ui进行设计#xff0c;前端可以通过选择时间来导出具体的表格数据#xff0c;根据用户选择的时间进行Excel文件的数据导出。 按照需求来设计代码#xff0c;根据element…使用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();// 模拟从数据库或其他数据源获取数据ListExcelData 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 ListExcelData fetchDataFromDataSource(LocalDate startDate, LocalDate endDate) {// 模拟从数据库或其他数据源查询数据// 返回符合日期范围的数据列表ListExcelData 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 是一个包含开始日期和结束日期的请求数据对象。
templatedivel-date-pickerv-modelstartDatetypedateplaceholder选择开始日期/el-date-pickerel-date-pickerv-modelendDatetypedateplaceholder选择结束日期/el-date-pickerel-button clickexportData导出 Excel/el-button/div
/templatescript
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天,且开始时间不能大于结束时间
templatedivel-date-pickerv-modelstartDatetypedateplaceholder选择开始日期:picker-optionspickerOptionsinputhandleStartDateChange/el-date-pickerel-date-pickerv-modelendDatetypedateplaceholder选择结束日期:picker-optionspickerOptions:disabledstartDate // 禁用结束日期输入框直到选择了开始日期/el-date-pickerel-button :disabled!isDateRangeValid clickexportData导出 Excel/el-button/div
/templatescript
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天我们会将结束日期重置为空以确保选择的日期范围是有效的。 请在你的实际项目中进行适当的测试和调整。同样前端验证只是提供用户友好的提示后端也应该进行相应的验证以确保数据的完整性和安全性。
