SpringBoot vue 导出excel

### 如何在 SpringBoot 和 Vue 项目中实现导出 Excel 功能 #### 后端部分 (SpringBoot) 为了实现出 Excel 文件的功能，在后端可以使用 `EasyExcel` 或者传统的 `POI` 库来完成。以下是两种方式的具体实现： 1. **使用 EasyExcel** 易于配置和高性能的 `EasyExcel` 是一种流行的解决方案，尤其适用于大数据量场景。 - 添加依赖项到项目的 `pom.xml` 中： ```xml <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>3.0.5</version> </dependency> ``` - 创建实体类用于映射 Excel 表格中的列： ```java import com.alibaba.excel.annotation.ExcelProperty; public class ExportStudentExcel { @ExcelProperty("学生姓名") private String name; @ExcelProperty("学号") private String studentNo; // Getter and Setter methods... } ``` - 编写服务方法以生成并返回 Excel 文件流： ```java import com.alibaba.excel.EasyExcel; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.net.URLEncoder; import java.util.List; public void export(HttpServletResponse response, List<ExportStudentExcel> data) throws IOException { response.setContentType("application/vnd.ms-excel"); response.setCharacterEncoding("utf-8"); String fileName = URLEncoder.encode("学生列表", "UTF-8").replaceAll("\\+", "%20"); response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx"); EasyExcel.write(response.getOutputStream(), ExportStudentExcel.class).sheet("模板").doWrite(data); } ``` 2. **使用 POI** 如果不想引入额外的第三方库，则可以选择 Apache POI 来手动创建 Excel 文档。 - 添加 Maven 依赖： ```xml <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>5.2.3</version> </dependency> ``` - 使用以下代码片段编写控制器逻辑： ```java import org.apache.poi.ss.usermodel.*; import org.apache.poi.xssf.streaming.SXSSFWorkbook; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.List; public void exportWithPoi(HttpServletResponse response, List<String[]> dataList) throws IOException { SXSSFWorkbook workbook = new SXSSFWorkbook(); Sheet sheet = workbook.createSheet("学生信息表"); Row rowHeader = sheet.createRow(0); CellStyle headerCellStyle = workbook.createCellStyle(); Font font = workbook.createFont(); font.setBold(true); headerCellStyle.setFont(font); String[] headers = {"序号", "姓名", "年龄"}; for(int i=0;i<headers.length;i++) { Cell cell = rowHeader.createCell(i); cell.setCellValue(headers[i]); cell.setCellStyle(headerCellStyle); } int rowNum = 1; for(String[] rowData : dataList){ Row row = sheet.createRow(rowNum++); for(int j=0;j<rowData.length;j++){ row.createCell(j).setCellValue(rowData[j]); } } ServletOutputStream outputStream = response.getOutputStream(); response.setContentType("application/octet-stream"); response.setHeader("Content-Disposition","attachment; filename=\"students.xlsx\""); workbook.write(outputStream); workbook.close(); outputStream.flush(); outputStream.close(); } ``` #### 前端部分 (Vue.js) 前端主要通过调用接口获取服务器生成好的文件链接或者二进制数据，并触发浏览器下载行为。 1. 定义 API 请求函数： ```javascript async function downloadFile() { const res = await axios({ method: 'GET', url: '/api/export/excel', // 替换为实际的服务地址 responseType: 'blob' }); let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); let link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = 'student_list.xlsx'; // 设置默认保存名称 link.click(); } ``` 2. 调整按钮点击事件绑定上述方法即可。 --- ### 总结 无论是选用哪种技术方案，都需要考虑以下几个方面： - 数据源准备（数据库查询）。 - 文件格式定义以及样式定制化需求。 - 用户界面设计以便发起请求动作[^3]。 以上介绍了基于 Spring Boot 和 Vue 构建应用程序时如何集成 Excel 导出功能的一些基本概念和技术细节[^4]^。