公告

2026年2月13日、以Excel形式导出页面表格数据的前后端实现篇

Excel文件处理实现文档

提要：

前端（插件）实现：SheetJS
后端（JAVA）实现：POI

一、SheetJS

SheetJS（xlsx 库）是前端处理 Excel 文件的轻量级 JavaScript 库，无需后端参与，全程在浏览器端完成 Excel 生成、解析和下载，具体学习可参考：https://docs.sheetjs.com/docs/。

1. 引入 SheetJS 库

1.1 CDN 引入（快速测试）：

在 HTML 的<head>中添加以下代码，直接加载线上库文件，无需本地配置，适合快速验证功能：

<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>

1.2 npm 安装（Vue/React 等工程化项目）：

适用于 Vue、React、Angular 等前端工程化项目，可通过包管理器管理依赖：

执行安装命令：

npm install xlsx --save
# 或 yarn add xlsx

在组件/页面中引入：
```
import * as XLSX from 'xlsx'
```

2. HTML表格（Excel导出实现）

基于 CDN 引入方式，实现网页表格一键导出为 Excel 文件：

2.1 基础结构搭建

在 HTML 中引入 SheetJS 库，并定义带唯一标识的表格（核心数据载体）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML表格导出Excel</title>
  <!-- 1.1 引入SheetJS库 -->
  <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>
  <!-- 定义表格，ID为myTable（唯一标识，用于JS定位） -->
  <table id="myTable" border="1">
    <thead><tr><th>姓名</th><th>年龄</th><th>城市</th></tr></thead>
    <tbody>
      <tr><td>张三</td><td>25</td><td>北京</td></tr>
      <tr><td>李四</td><td>30</td><td>上海</td></tr>
    </tbody>
  </table>
</body>
</html>

2.2 定义导出触发按钮

在表格下方添加按钮，绑定导出功能函数，作为用户操作的入口：

<!-- 导出按钮，点击触发exportTableToExcel函数 -->
<button onclick="exportTableToExcel()">导出Excel</button>

2.3 编写导出功能函数

在 HTML 中新增<script>标签，实现核心导出逻辑exportTableToExcel()：

<script>
  function exportTableToExcel() {
    // 步骤1：通过ID精准获取页面中要导出的表格DOM，提取表头、行、列数据
    const tableDom = document.getElementById('myTable');
    
    // 步骤2：将表格DOM转换为SheetJS工作表（worksheet）
    // XLSX.utils：SheetJS工具函数集合，处理数据格式转换
    // { raw: true }：保留原始数据类型（如数字不转为字符串）
    const worksheet = XLSX.utils.table_to_sheet(tableDom, { raw: true });
    
    // 步骤3：创建工作簿（workbook，对应整个Excel文件），并添加工作表
    const workbook = XLSX.utils.book_new();
    // 第二个参数：工作表对象；第三个参数：Excel底部的sheet标签名
    XLSX.utils.book_append_sheet(workbook, worksheet, '用户数据');
    
    // 步骤4：生成Excel文件并触发浏览器下载
    // 参数：工作簿、导出文件名、配置（type: blob 表示生成二进制流）
    XLSX.writeFile(workbook, '用户列表.xlsx', { type: 'blob' });
  }
</script>

2.4 功能验证

保存HTML文件，用浏览器打开；
点击“导出Excel”按钮，浏览器自动下载用户列表.xlsx；
打开文件，验证表格数据是否完整导出，数据类型是否准确（如年龄为数字格式）。

3. JSON数据（Excel导出实现）

实际开发中，前端数据常以JSON格式存储（如接口返回数据），可直接基于JSON生成Excel，无需依赖HTML表格：

3.1 核心实现代码（CDN方式）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JSON导出Excel</title>
  <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>
  <button onclick="exportJsonToExcel()">JSON导出Excel</button>

  <script>
    function exportJsonToExcel() {
      // 步骤1：定义JSON数据源（模拟接口返回数据）
      const jsonData = [
        { name: '张三', age: 25, city: '北京' },
        { name: '李四', age: 30, city: '上海' },
        { name: '王五', age: 28, city: '广州' }
      ];

      // 步骤2：将JSON转换为工作表
      // json_to_sheet：SheetJS工具函数，JSON数组转工作表
      // header：自定义表头顺序（可选，不填则默认取JSON的key）
      const worksheet = XLSX.utils.json_to_sheet(jsonData, {
        header: ['name', 'age', 'city'], // 对应JSON的key
        skipHeader: false // 是否跳过表头（false则自动生成表头）
      });
      // 自定义表头名称（替换默认的key）
      XLSX.utils.sheet_add_aoa(worksheet, [['姓名', '年龄', '城市']], { origin: 'A1' });

      // 步骤3：创建工作簿并添加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'JSON数据');

      // 步骤4：触发下载
      XLSX.writeFile(workbook, 'JSON导出数据.xlsx');
    }
  </script>
</body>
</html>

3.2 关键说明

XLSX.utils.json_to_sheet()：核心函数，将JSON数组转换为工作表；
header参数：指定列的顺序，确保Excel列与JSON字段对应；
sheet_add_aoa()：手动修改表头名称（默认表头为JSON的key，如name/age，需替换为中文）。

二、POI

Apache POI 是 Java 处理 Microsoft Office 文档的开源库，支持 Excel（.xls/.xlsx）、Word、PPT 等格式的生成与解析，是后端实现 Excel 处理的主流方案，具体学习可参考：https://poi.apache.org/。

1. 引入 POI 依赖

POI 分为poi（处理.xls）和poi-ooxml（处理.xlsx），推荐使用 Maven/Gradle 引入，适配主流 SpringBoot 项目：

1.1 Maven 依赖（SpringBoot 项目）

在pom.xml中添加以下依赖（适配.xlsx格式，主流场景）：

<!-- POI 核心依赖（处理.xlsx） -->
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml</artifactId>
    <version>5.2.5</version> <!-- 稳定版本，可按需升级 -->
</dependency>
<!-- 可选：简化Excel操作的工具包（非必须，提升开发效率） -->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-poi</artifactId>
    <version>5.8.20</version>
</dependency>

1.2 Gradle 依赖

implementation 'org.apache.poi:poi-ooxml:5.2.5'
implementation 'cn.hutool:hutool-poi:5.8.20'

2. 核心概念

POI 处理 Excel 的核心对象（对应 Excel 结构）：

POI 对象	对应 Excel 结构	说明
Workbook	整个 Excel 文件（工作簿）	分为 XSSFWorkbook（.xlsx）、HSSFWorkbook（.xls）
Sheet	Excel 中的单个工作表（标签页）	一个 Workbook 可包含多个 Sheet
Row	工作表中的一行数据	从0开始计数（第1行对应rowIndex=0）
Cell	单元格（行中的某一列）	需指定单元格类型（字符串、数字等）

3. 基础实现（生成Excel并导出）

以 SpringBoot 接口为例，实现后端生成 Excel 并通过浏览器下载（基于List/JSON数据）：

3.1 实体类定义（模拟业务数据）

// User.java
public class User {
    private String name; // 姓名
    private Integer age; // 年龄
    private String city; // 城市

    // 构造器、getter/setter 省略
    public User(String name, Integer age, String city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
}

3.2 核心接口实现（生成并下载Excel）

// ExcelController.java
import org.apache.poi.ss.usermodel.*;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.OutputStream;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.List;

@RestController
public class ExcelController {

    @GetMapping("/export/excel")
    public void exportExcel(HttpServletResponse response) throws Exception {
        // 步骤1：模拟业务数据（替代数据库查询结果）
        List<User> userList = new ArrayList<>();
        userList.add(new User("张三", 25, "北京"));
        userList.add(new User("李四", 30, "上海"));
        userList.add(new User("王五", 28, "广州"));

        // 步骤2：创建Workbook（工作簿），XSSFWorkbook对应.xlsx格式
        Workbook workbook = new XSSFWorkbook();
        // 创建Sheet（工作表），命名为“用户数据”
        Sheet sheet = workbook.createSheet("用户数据");

        // 步骤3：创建表头行（第1行，rowIndex=0）
        Row headerRow = sheet.createRow(0);
        // 定义表头单元格
        headerRow.createCell(0).setCellValue("姓名");
        headerRow.createCell(1).setCellValue("年龄");
        headerRow.createCell(2).setCellValue("城市");

        // 步骤4：填充业务数据（从第2行开始，rowIndex=1）
        int rowIndex = 1;
        for (User user : userList) {
            Row dataRow = sheet.createRow(rowIndex++);
            // 设置单元格值，指定数据类型（避免格式异常）
            dataRow.createCell(0).setCellValue(user.getName()); // 字符串
            dataRow.createCell(1).setCellValue(user.getAge());   // 数字
            dataRow.createCell(2).setCellValue(user.getCity());  // 字符串
        }

        // 步骤5：设置响应头，触发浏览器下载
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        response.setCharacterEncoding("UTF-8");
        // 文件名编码，避免中文乱码
        String fileName = URLEncoder.encode("后端导出用户数据.xlsx", "UTF-8");
        response.setHeader("Content-Disposition", "attachment; filename=" + fileName);

        // 步骤6：写出Excel文件到响应流
        OutputStream outputStream = response.getOutputStream();
        workbook.write(outputStream);
        // 关闭资源
        outputStream.flush();
        outputStream.close();
        workbook.close();
    }
}

3.3 功能验证

启动 SpringBoot 项目；
访问接口http://localhost:8080/export/excel；
浏览器自动下载后端导出用户数据.xlsx，验证数据是否完整。

总结

SheetJS 核心：前端无后端依赖，支持HTML表格/JSON直接导出Excel，table_to_sheet/json_to_sheet是核心工具函数；
POI 核心：后端处理Excel的主流方案，Workbook/Sheet/Row/Cell对应Excel结构，需区分.xls（HSSF）和.xlsx（XSSF）；
场景选择：简单导出用前端SheetJS（轻量），需权限/数据校验/批量处理用后端POI（安全可控）。

posted on 2026-02-13 15:38 落落历险记阅读(68) 评论(0) 收藏举报

刷新页面返回顶部

LLadventure

公告