2025/06/03日日志 Excel导入

基于Spring Boot和纯HTML+JS的Excel导入功能实现

在Web开发中，Excel导入功能是常见的需求之一。本文将详细介绍如何使用Spring Boot作为后端框架，结合纯HTML和JavaScript实现Excel文件的导入功能。我们将使用Apache POI库来处理Excel文件，并通过前后端的协作完成数据的导入。

一、Excel导入功能实现

后端Controller实现

/**
 * 导入Excel
 * @param file 上传的Excel文件
 * @return 导入结果
 */
@RequestMapping("/importMonitor")
@ResponseBody
public Object importMonitor(@RequestParam MultipartFile file) {
    Map<String, Object> result = monitorService.importMonitor(file);
    return ResultObj.returnObj(result);
}

后端Service实现

@Override
public Map<String, Object> importMonitor(MultipartFile file) {
    Map<String, Object> result = new HashMap<>();
    try {
        List<Map<String, Object>> importList = ExcelUtil.excelToList(file, "Sheet1"); // 假设工作表名为"Sheet1"
        for (Map<String, Object> importMap : importList) {
            String id = OddNumbersUtil.getNumber("monitor"); // 生成唯一ID
            Map<String, Object> param = new HashMap<>();
            param.put("id", id);
            param.put("monitorName", importMap.get("monitor_name"));
            param.put("monitorNumber", importMap.get("monitor_number"));
            param.put("ip", importMap.get("ip"));
            param.put("port", importMap.get("port"));
            param.put("monitorState", 1); // 默认状态
            param.put("monitorOccupyState", 1); // 默认占用状态
            param.put("createTime", new Date());
            param.put("createPerson", ShiroKit.getUser().getName());
            param.put("imgUrl", importMap.get("img_url"));
            param.put("contacts", importMap.get("contacts"));
            param.put("contactNumber", importMap.get("contact_number"));
            param.put("installDate", ExcelUtil.ExcelDoubleToDate(String.valueOf(importMap.get("install_date"))));
            param.put("periodOfValidity", ExcelUtil.ExcelDoubleToDate(String.valueOf(importMap.get("period_of_validity"))));
            param.put("expirationDate", ExcelUtil.ExcelDoubleToDate(String.valueOf(importMap.get("expiration_date"))));
            param.put("deviceAddress", importMap.get("device_address"));
            param.put("monitorSwitchState", 1); // 默认开关状态
            param.put("deviceType", importMap.get("device_type"));
            param.put("modelType", importMap.get("model_type"));
            param.put("significant", importMap.get("significant"));
            param.put("locational", importMap.get("locational"));
            param.put("manufacturersId", importMap.get("manufacturers_id"));
            param.put("deviceCoding", importMap.get("device_coding"));
            param.put("subordinateSubsystem", importMap.get("subordinate_subsystem"));
            monitorMapper.addMonitor(param); // 调用Mapper插入数据
        }
        result.put("success", true);
        result.put("message", "导入成功");
    } catch (Exception e) {
        e.printStackTrace();
        result.put("success", false);
        result.put("message", "导入失败：" + e.getMessage());
    }
    return result;
}

前端JS实现

layui.use('upload', function () {
    var upload = layui.upload;
    var uploadInst = upload.render({
        elem: '#importMonitor', // 绑定元素
        url: '/monitor/importMonitor', // 上传接口
        accept: 'file', // 允许上传的文件类型
        exts: 'xlsx|xls', // 允许上传的文件扩展名
        done: function (res) {
            if (res.success) {
                layer.msg('导入成功');
                stockRecord.table.refresh(); // 刷新表格数据
            } else {
                layer.msg(res.message); // 显示错误信息
            }
        },
        error: function () {
            layer.msg('上传失败，请检查文件格式是否正确');
        }
    });
});

前端HTML实现

<button name="导入Excel" icon="fa" id="importMonitor">导入Excel</button>

二、总结

通过上述步骤，我们成功实现了基于Spring Boot和纯HTML+JS的Excel导入功能。关键点包括：

1. 使用Apache POI库处理Excel文件：通过ExcelUtil工具类读取Excel文件内容并转换为Java对象。
2. 后端提供导入接口：通过Spring Boot的Controller和Service处理文件上传和数据导入逻辑。
3. 前端通过JS处理文件上传：使用Layui的upload模块实现文件上传，并通过回调函数处理导入结果。
4. 日期格式转换：使用ExcelUtil.ExcelDoubleToDate()函数将Excel中的日期格式转换为标准日期格式。