<think>我们之前已经讨论过
使用Vue3+ElementPlus+SpringBoot结合
POI实现
Excel导入的方案。现在用户再次询问示例代码，可能是需要更详细的实现步骤或者对之前方案的补充。我将根据之前的回答，进一步优化和细化代码示例，确保前
后端代码的完整性和可运行性。
后端部分：1.添加
POI依赖：在pom.xml中添加
poi-ooxml依赖。2.创建
Excel工具类：
使用POI读取
Excel文件内容，支持.xlsx
格式（
使用XSSFWorkbook）。注意处理不同单元格类型（
字符串、数字、日期等）。3.创建文件上传接口：
使用MultipartFile接收文件，调用工具类解析，返回结果。前端部分：1.安装ElementPlus和axios：
使用npm安装。2.配置ElementPlus：在main.js中全局引入。3.创建上传组件：
使用ElementPlus的el-upload组件，配置action指向
后端接口，设置文件类型校验，以及上传成功/失败的回调。注意事项：-跨域问题：如果前端地址和
后端接口不同源，需要在SpringBoot中配置CORS。-文件类型校验：前端通过accept属性限制为.xlsx和.xls，同时在
后端也要检查文件类型。-安全性：上传接口需要考虑身份验证，可以在请求头中添加token。下面给出更详细的代码示例：</think>### Vue3 + Element Plus + Spring Boot +
POI 实现
Excel 导入完整方案
####
后端实现 (Spring Boot +
POI)
1. **添加
POI 依赖** (`pom.xml`)
```xml
<dependency>
<groupId>org.apache.
poi</groupId>
<artifactId>
poi-ooxml</artifactId>
<version>5.2.3</version>
</dependency>
```
2. **
Excel 解析工具类** (`
ExcelUtil.java`)
```java
import org.apache.
poi.ss.usermodel.*;
import org.apache.
poi.xssf.usermodel.XSSFWorkbook;
import java.io.InputStream;
import java.util.*;
public class
ExcelUtil {
public static List<Map<String, Object>> parse
Excel(InputStream is) {
List<Map<String, Object>> dataList = new ArrayList<>
();
try (Workbook workbook = new XSSFWorkbook(is)) {
Sheet sheet = workbook.getSheetAt(0);
Row headerRow = sheet.getRow(0);
// 获取
表头
List<String> headers = new ArrayList<>
();
for (Cell cell : headerRow) {
headers.add(getCellValue(cell));
}
// 处理数据行
for (int i = 1; i <= sheet.getLastRowNum
(); i++) {
Row row = sheet.getRow(i);
Map<String, Object> rowData = new HashMap<>
();
for (int j = 0; j < headers.size
(); j++) {
Cell cell = row.getCell(j, Row.MissingCellPolicy.CREATE_NULL_AS_BLANK);
rowData.put(headers.get(j), getCellValue(cell));
}
dataList.add(rowData);
}
} catch (Exception e) {
throw new RuntimeException("
Excel解析失败: " + e.getMessage
());
}
return dataList;
}
private static String getCellValue(Cell cell) {
return switch (cell.getCellType
()) {
case STRING -> cell.getStringCellValue
().
trim();
case NUMERIC -> DateUtil.isCellDateFormatted(cell) ?
cell.getDateCellValue
().toString
() :
String.valueOf((int) cell.getNumericCellValue
());
case BOOLEAN -> String.valueOf(cell.getBooleanCellValue
());
case FORMULA -> cell.getCellFormula
();
default -> "";
};
}
}
```
3. **文件上传控制器** (`
ExcelController.java`)
```java
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.util.*;
@RestController
@RequestMapping("/api/
excel")
public class
ExcelController {
@PostMapping("/import")
public Map<String, Object> import
Excel(@RequestParam("file") MultipartFile file) {
Map<String, Object> result = new HashMap<>
();
try {
List<Map<String, Object>> data =
ExcelUtil.parse
Excel(file.getInputStream
());
// TODO: 这里添加业务处理逻辑（如保存到数据库）
result.put("success", true);
result.put("message", "
导入成功，共处理 " + data.size
() + " 条数据");
result.put("data", data);
} catch (Exception e) {
result.put("success", false);
result.put("message", "
导入失败: " + e.getMessage
());
}
return result;
}
}
```
#### 前端实现 (Vue3 + Element Plus)
1. **安装必要依赖**
```bash
npm install element-plus axios
```
2. **上传组件** (`
ExcelUpload.vue`)
```vue
<template>
<div class="
excel-import">
<el-upload
class="upload-demo"
:action="uploadUrl"
:headers="headers"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
accept=".xlsx,.xls"
:show-file-list="false"
>
<el-button type="primary">
<el-icon><Upload /></el-icon>
导入Excel
</el-button>
</el-upload>
<el-dialog v-model="previewVisible" title="
导入预览" width="80%">
<el-table :data="previewData" border height="500">
<el-table-column
v-for="(value, key) in previewData[0] || {}"
:key="key"
:prop="key"
:label="key"
/>
</el-table>
<template #footer>
<el-button @click="previewVisible = false">取消</el-button>
<el-button type="primary" @click="confirmImport">确认
导入</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
const uploadUrl = ref('http://localhost:8080/api/
excel/import');
const headers = ref({
Authorization: `Bearer ${localStorage.getItem('token')}`
});
const previewVisible = ref(false);
const previewData = ref([]);
const beforeUpload = (file) => {
const is
Excel = [
'application/vnd.ms-
excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
].includes(file.type);
if (!is
Excel) {
ElMessage.error('只能上传
Excel文件 (.xls, .xlsx)');
return false;
}
return true;
};
const handleSuccess = (response) => {
if (response.success) {
previewData.value = response.data;
previewVisible.value = true;
ElMessage.success(response.message);
} else {
ElMessage.error(response.message);
}
};
const handleError =
() => {
ElMessage.error('上传失败，请检查网络连接');
};
const confirmImport = async
() => {
try {
// TODO: 发送确认
导入请求
const { data } = await axios.post('/api/
excel/confirm-import', {
data: previewData.value
});
ElMessage.success(data.message);
previewVisible.value = false;
} catch (error) {
ElMessage.error('
导入失败: ' + error.response?.data?.message || error.message);
}
};
</script>
```
#### 关键功能说明
1. **
Excel 解析流程**
- 前端上传
Excel 文件
-
后端解析为 `List<Map<String, Object>>` 结构
- 返回带预览数据的响应
- 用户确认后执行最终
导入
2. **数据处理优化**
- 自动识别
表头作为键名
- 处理空单元格（`CREATE_NULL_AS_BLANK`）
- 数值类型自动转换（日期、数字等）
-
字符串自动去除
空格
3. **安全增强**
- 前端文件类型验证
-
后端异常捕获
- JWT 认证支持
#### 常见问题解决方案
1. **跨域问题**：在 Spring Boot 中添加配置类
```java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*");
}
}
```
2. **大文件处理**：
使用 POI 的流式 API
```java
try (OPCPackage pkg = OPCPackage.open(file.getInputStream
())) {
XSSFReader reader = new XSSFReader(pkg);
// 流式处理每行数据
}
```
3. **复杂
表格解析**：处理合并单元格
```java
// 在工具类中添加合并单元格处理
for (CellRangeAddress region : sheet.getMergedRegions
()) {
// 计算合并区域的实际值
}
```
> 完整实现需要根据具体业务需求调整数据处理逻辑和数据库操作部分。实际部署时需配置生产环境地址和 HTTPS 支持[^1]。
本文介绍了解决从Excel导入数据时遇到的空格和乱码问题，特别是在使用POI导入时，传统trim()方法无法处理的问题。通过自定义正则表达式，成功去除特殊空格，确保数据正确导入。
扫一扫
1074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
