2025/05/30日日志 Excel导出

Spring Boot + 纯HTML+JS实现Excel导出功能

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

一、开发环境准备

后端技术栈

• Spring Boot框架：用于快速开发Java应用。

前端技术栈

• 纯HTML+JavaScript：不依赖任何前端框架，直接使用原生HTML和JavaScript实现。

依赖引入

在pom.xml中添加Excel处理相关依赖：

<!-- excel导出 start-->
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi</artifactId>
    <version>3.16</version>
</dependency>
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml</artifactId>
    <version>3.16</version>
</dependency>
<!-- excel导出 end-->

二、Excel工具类开发

创建ExcelUtil工具类，封装Excel的导出功能：

import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletResponse;
import java.net.URLEncoder;
import java.text.SimpleDateFormat;
import java.util.*;

public class ExcelUtil {
    /**
     * 导出集合到Excel
     * @param response 响应对象
     * @param name 文件名
     * @param list 数据列表
     */
    public static void exportToExcel(HttpServletResponse response, String name, List<LinkedHashMap<String, Object>> list) {
        try {
            String fileName = name + ".xls";
            HSSFWorkbook hssfWorkbook = new HSSFWorkbook();
            HSSFSheet hssfSheet = hssfWorkbook.createSheet(name);
            int rowNum = 0;
            HSSFRow hssfRow = hssfSheet.createRow(rowNum++);
            int j = 0;
            if (list.size() > 0) {
                for (String i : list.get(0).keySet()) {
                    hssfRow.createCell(j++).setCellValue(i);
                }
                for (int i = 0; i < list.size(); i++) {
                    HSSFRow row = hssfSheet.createRow(rowNum++);
                    Map map = list.get(i);
                    j = 0;
                    for (Object obj : map.values()) {
                        if (obj != null) {
                            row.createCell(j++).setCellValue(obj.toString());
                        } else {
                            row.createCell(j++);
                        }
                    }
                }
            }
            response.setHeader("content-Type", "application/vnd.ms-excel");
            response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "utf-8"));
            hssfWorkbook.write(response.getOutputStream());
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

三、Excel导出功能实现

后端Controller实现

@RequestMapping("/exportMonitor")
@ResponseBody
public void exportMonitor(String monitorName, String monitorState, String monitorOccupyState, String monitorSwitchState, String significant, HttpServletResponse response) {
    Map<String, Object> param = new HashMap<>();
    param.put("monitorName", monitorName);
    param.put("monitorState", monitorState);
    param.put("monitorOccupyState", monitorOccupyState);
    param.put("monitorSwitchState", monitorSwitchState);
    param.put("significant", significant);
    List<LinkedHashMap<String, Object>> database = monitorService.getAllMonitorLinkedHashMap(param);
    ExcelUtil.exportToExcel(response, "monitor", database);
}

前端JS实现

Monitor.export = function () {
    let export1 = document.getElementById('export');
    let params = '';
    if ($("#monitorName").val()) {
        params += '&monitorName=' + $("#monitorName").val();
    }
    if ($("#monitorState").val()) {
        params += '&monitorState=' + $("#monitorState").val();
    }
    if ($("#monitorOccupyState").val()) {
        params += '&monitorOccupyState=' + $("#monitorOccupyState").val();
    }
    if ($("#monitorSwitchState").val()) {
        params += '&monitorSwitchState=' + $("#monitorSwitchState").val();
    }
    if ($("#significant").val()) {
        params += '&significant=' + $("#significant").val();
    }
    export1.setAttribute('href', "/monitor/exportMonitor?" + params.substring(1, params.length));
};

前端HTML实现

<a id="export" href="#">
    <button type="button" class="btn btn-primary" onclick="Monitor.export()">
        <i class="fa fa-search"></i>&nbsp;导出
    </button>
</a>

四、总结

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

1. 使用Apache POI库处理Excel文件：通过ExcelUtil工具类将数据导出为Excel文件。
2. 后端提供导出接口：通过Spring Boot的Controller处理请求，并调用工具类完成文件生成。
3. 前端通过JS处理参数传递：通过JavaScript动态拼接请求参数，并触发文件下载。
4. 文件下载：利用HTML的<a>标签和href属性实现文件下载。