spring boot vue 批量导入Excel

### 实现Spring Boot和Vue.js结合的Excel批量导入功能 为了实现Spring Boot与Vue.js相结合的Excel批量导入功能，可以按照以下方式构建应用。 #### 后端部分 (Spring Boot) 在Spring Boot项目中，可以通过`Apache POI`库来解析Excel文件并将其转换为Java对象。以下是具体实现： 1. **引入依赖** 需要在项目的`pom.xml`文件中添加必要的Maven依赖项。 ```xml <dependencies> <!-- Apache POI for Excel processing --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>5.2.3</version> </dependency> <!-- Spring Boot Starter Web --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- Optional: If you need to exclude auto-configurations like data source --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-autoconfigure</artifactId> </dependency> </dependencies> ``` 上述代码片段展示了如何通过Maven管理依赖关系[^1]。 2. **创建控制器** 定义一个RESTful接口用于接收前端上传的Excel文件，并利用POI读取其内容。 ```java import org.apache.poi.ss.usermodel.*; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import java.io.InputStream; import java.util.ArrayList; import java.util.Iterator; import java.util.List; @RestController public class ExcelController { @PostMapping("/upload-excel") public String handleFileUpload(@RequestParam("file") MultipartFile file) { try (InputStream inputStream = file.getInputStream()) { Workbook workbook = WorkbookFactory.create(inputStream); Sheet sheet = workbook.getSheetAt(0); // 获取第一个表单 List<String[]> dataList = new ArrayList<>(); Iterator<Row> rowIterator = sheet.iterator(); while (rowIterator.hasNext()) { Row currentRow = rowIterator.next(); // 跳过标题行（如果存在） if (!currentRow.getCell(0).getStringCellValue().equals("Header")) { int cellCount = currentRow.getLastCellNum(); // 列数 String[] rowData = new String[cellCount]; for (int i = 0; i < cellCount; i++) { Cell cell = currentRow.getCell(i, Row.MissingCellPolicy.CREATE_NULL_AS_BLANK); switch (cell.getCellType()) { case STRING: rowData[i] = cell.getStringCellValue(); break; case NUMERIC: if (DateUtil.isCellDateFormatted(cell)) { rowData[i] = cell.getDateCellValue().toString(); } else { rowData[i] = Double.toString(cell.getNumericCellValue()); } break; default: rowData[i] = ""; } } dataList.add(rowData); } } System.out.println(dataList); return "Success"; } catch (Exception e) { e.printStackTrace(); return "Error occurred during upload."; } } } ``` 此代码实现了基本的功能逻辑，即接受来自客户端的文件输入流，并逐行列举单元格的内容[^4]。 #### 前端部分 (Vue.js) 对于前端界面的设计，可以选择使用Element UI组件库中的`el-upload`控件完成文件选择器的渲染以及向服务器发送请求的操作。 安装所需NPM包： ```bash npm install element-ui axios --save ``` 编写HTML模板及脚本如下所示： ```html <template> <div id="app"> <h1>批量导入Excel</h1> <el-upload drag :action="'http://localhost:8080/upload-excel'" name="file" multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖拽到这里或者点击上传。</div> </el-upload> </div> </template> <script> export default { name: 'App', }; </script> ``` 以上代码段基于Vue框架搭建了一个简单的页面布局，其中包含了能够触发HTTP POST方法提交到指定URL地址上的按钮元件[^5]。 --- #### 问题