Excel 与 Web 的完美融合：从导入到导出，前端 Excel 处理技术浅析

#2025/09/16

目录

1. 背景

  • 在现代前端开发中，处理 Excel文件已成为业务系统的基础需求。
  • 从数据导入到在线编辑，从完美展示到高质量导出，每个环节都面临着技术选型的挑战

本文将深入分析主流技术方案，为你的项目选型提供全面参考

内部纵横系统就有大量这种场景，这里可以展示下系统及线下 excel 表格

2. 技术本质：为什么 Web 版本的 Excel 这么复杂？

  • 关键挑战
    • Excel有自己的文件格式和渲染引擎
    • Web浏览器有自己的 HTML/CSS 渲染体系
    • 两者之间需要“翻译“和“转换“

2.1. Excel文件的本质 - 它到底是什么？

Excel文件其实是一个压缩包，当你双击打开一个.xlsx文件，看到的是表格界面，但实际上：

Excel文件 = 一个ZIP压缩包，里面包含：
├── [Content_Types].xml        # 文件类型定义
├── _rels/                     # 关系文件夹
├── xl/                        # Excel核心数据
│   ├── workbook.xml          # 工作簿信息
│   ├── worksheets/           # 工作表数据
│   │   ├── sheet1.xml        # 第一个工作表
│   │   └── sheet2.xml        # 第二个工作表
│   ├── styles.xml            # 样式定义
│   ├── sharedStrings.xml     # 共享字符串
│   └── media/                # 图片等媒体文件
└── docProps/                 # 文档属性

举个例子：

<!-- sheet1.xml中的一个单元格 -->
<c r="A1" s="1" t="inlineStr">
  <is><t>销售额</t></is>
</c>

翻译成人话就是：

  • r="A1": 这个单元格在A1位置
  • s="1": 使用第1号样式
  • t="inlineStr": 内容是文本
  • <t>销售额</t>: 实际内容是“销售额“

Excel的样式系统，样式信息单独存储

<!-- styles.xml中的样式定义 -->
<!-- 这个样式使用1号字体、2号填充、1号边框，并且居中对齐。
这就是为什么Excel处理复杂的原因：数据和样式是分离的！-->
<cellXfs>
  <xf fontId="1" fillId="2" borderId="1">
    <alignment horizontal="center" vertical="center"/>
  </xf>
</cellXfs>

2.2. 导入：把Excel“拆解“成Web能懂的格式

导入的技术本质

Excel文件 → 解压缩 → 解析XML → 重组数据 → 转换格式 → JavaScript对象
  • 浏览器文件读取：input file → 内存中（以ArrayBuffer形式）
  • 解压缩和解析
  • 数据结构转换：Excel内部数据 → JavaScript对象
  • 所以
    • 每个翻译都要要准确映射，不能丢失信息
    • 特殊处理较多
      • 数字格式处理
      • 公式处理
      • 图片等

2.3. 展示： 让浏览器“画“出Excel的样子

1、把Excel样式转换成CSS样式

Excel样式对象 → CSS规则 → HTML元素 → 浏览器渲染
  • 复杂样式的处理
    • 单元格合并
    • 边框样式
    • Excel字体样式 → CSS字体样式
    • 渐变背景

2、渲染引擎的选择

  • 方案1：HTML表格渲染
  • 方案2：Canvas渲染
  • 方案 3：SVG渲染
  • 优势与劣势分析？

2.4. 编辑：让Web页面具备Excel的交互能力

  • 编辑的本质：状态管理 + 界面更新
    • 编辑 = 用户操作 → 数据变更 → 界面同步 → 状态保存
      一些控件
  • 颜色选择器的实现
  • 公式系统的实现
    • 公式输入和识别
    • 公式计算引擎
  • 选择和拖拽功能
  • 编辑操作的撤销重做
    • 历史记录系统

2.5. 导出：把Web数据重新“包装“成Excel

  • 导出的本质：逆向转换
    • 导出 = Web数据 → Excel格式 → 文件生成 → 用户下载
JavaScript对象 → Excel内部结构 → XML文件 → 压缩打包 → 文件下载

打包时，有一些专门的 比如 JSZip 库来支持

导出过程中的技术挑战

  • 挑战1：样式精确还原
  • 挑战2：数据类型处理
  • 挑战3：文件大小优化

2.6. 性能优化 - 让一切运行得更快更流畅

  • 内存容易爆：一个包含10万个单元格的Excel文件，每个单元格的JavaScript对象可能占用几百字节内存
  • 优化策略
    • 虚拟渲染（Virtual Rendering）
      • 核心思想：只渲染用户看得到的部分
    • 样式缓存和复用
    • 增量更新策略
      • 传统方式：全量重新渲染
      • 优化方式：只更新变化的部分
    • Web Workers异步处理 复杂计算阻塞UI线程
    • 内存管理和垃圾回收

2.7. 总结 → 自建不可能

Excel在Web端处理的完整技术流程图.png|936

3. 导入：主流导入库技术选型

核心诉求：能够本地 Excle 导入查看即可

  • SheetJS CE（社区版）
    • 开源状态：完全开源（MIT许可证）
    • 格式支持：XLSX、XLS、CSV等50+种格式
    • 样式支持： ❌ 完全不支持样式读取
    • 数据完整性：✅ 100%准确读取数据内容
    • 适用场景：纯数据导入，不关心样式的场景
  • SheetJS Pro（商业版）
    • 开源状态：商业授权（年费$2000-$15000+）
    • 样式支持：✅ 完整的样式、颜色、边框支持
    • 高级功能：✅ 图片、图表、条件格式支持
    • 技术支持：专业团队维护
    • 适用场景：企业级应用，对样式保真度要求极高
  • ExcelJS
    • 开源状态：完全开源（MIT许可证）
    • API设计：面向对象，直观易用
    • 样式支持：✅ 完整的 Excel样式系统支持
    • 功能完整性：单元格合并、富文本、条件格式等
    • 性能表现：中等，但功能无阉割
    • 社区活跃度：GitHub 12k+ stars，持续维护
  • Luckysheet
    • 开源状态：完全开源
    • 导入方式：需配合其他库或使用内置导入插件
    • 样式兼容：导入时样式转换有损失
    • 用户体验：提供完整的表格编辑界面
    • 中文支持：国产项目，中文文档友好
  • Univer（现代化表格方案） → 和 Luckysheet 一家共送出
    • 开源状态：开源核心 + 商业增强功能
    • 技术架构：基于Canvas渲染，性能优异
    • 导入能力：样式保持度约 80-85%
    • 现代特性：支持协作编辑、版本管理、实时同步
    • 中文支持：国产项目，中文文档友好
    • 商业模式：核心功能免费，高级功能需授权

3.1. 导入能力评分对比

库名称开源程度样式支持格式兼容学习成本推荐指数
SheetJS CE⭐⭐⭐⭐⭐❌⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
SheetJS Pro❌⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
ExcelJS⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Luckysheet⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Univer⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
  • ❌ SheetJS CE，导入后样式丢失
  • ❌ ExcelJS 支持导入，但导入后展示还需要开发
    • 我们的诉求是，导入后能够快速展示
  • ❌ SheetJS Pro 价格不允许
  • ❌ Univer 导入功能有限制
  • ✅ Luckysheet 导入后且可以快速展示本地 excel ，满足诉求

3.2. Demo 演示

4. Web 上 Excel 展示能力选型

4.1. 展示方案技术路线

  • ❌自建：纯HTML表格方案
    • 基于ExcelJS解析后生成HTML表格，通过CSS还原Excel样式。
    • 样式还原度可达90-95%，但需要大量的样式映射工作。
  • ❌ 自建：Canvas/SVG渲染方案
    • 将 ExcelJS解析容渲染到Canvas或SVG上，可实现接近100%的视觉还原，但是
      • 但失去了文本选择和搜索能力
      • 大量的研发工作
  • ✅ Luckysheet：
    • 提供最接近Excel的展示效果，支持工作表切换、缩放等功能
  • ❌ x-spreadsheet：
    • 轻量级选择，体积小性能好，但功能相对简单
    • 另外社区不怎么维护了
  • ❌ Univer：
    • 现代化架构，Canvas渲染，性能优秀，
    • 但核心功能可能需要商业授权
  • ❌ 其他
    • 如 OnlyOffice：企业级方案，兼容性最好但需要部署复杂

4.2. 展示能力对比分析

方案类型样式还原度交互能力移动端支持开发成本维护难度
HTML表格90-95%⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Canvas渲染100%⭐⭐⭐⭐⭐⭐⭐⭐
Luckysheet85%⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Univer90%⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
x-spreadsheet80%⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

5. Excel 在线编辑能力

Web编辑功能的技术本质是在浏览器中重新实现Excel的编辑逻辑

  • 状态管理：维护表格的完整状态（数据、样式、选择状态等）
  • 事件系统：处理键盘、鼠标交互，实现Excel般的操作体验
  • 渲染引擎：高效的视图更新和重绘机制
  • 公式引擎：实现Excel公式的解析、计算和依赖管理
  • 协作同步：
    • 多人编辑时的冲突解决和状态同步
    • 多版本
编辑功能Luckysheetx-spreadsheetOnlyOffice自建方案
基础编辑✅✅✅❌
样式设置✅✅✅❌
公式计算✅⚠️✅❌
条件格式✅❌✅❌
图表制作✅❌✅❌
协作编辑✅❌✅❌

结论：使用 Luckysheet 最优

当前其实业务其实没有在线编辑的诉求，但是可以提请技术方案的储备或共识

6. 导出与还原能力深度解析

6.1. 技术本质

技术本质：js 对象（数据和样式等） → Excel 格式

  • 数据序列化：将 JavaScript 对象转换为 Excel 可识别的数据格式
  • 样式映射：Web CSS 样式 与 Excel样式的双向转换
  • 二进制生成：构建符合 Excel 规范的二进制文件
  • 压缩打包：Excel 文件本质是 ZIP 压缩的XML文档集合

6.2. 业务核心诉求

  • 富文本
  • 单元格宽高
  • 单元格背景
  • 合并单元格
  • 等等

6.3. 技术方案

  • ❌ 自建
    • 成本不允许，也没这个必要，有开源的方案 excel
  • ✅ ExcelJS - 专业级导出能力

    • 字体系统：字体族、大小、颜色、粗体、斜体等完整支持

    • 填充样式：纯色、渐变、图案填充完全支持

    • 边框处理：四边独立边框，支持多种样式和颜色

    • 对齐方式：水平、垂直对齐，文本换行等格式完整支持

    • ExcelJS原生支持多种图片格式的插入

      • base64

    • 富文本满足诉求

      • image.png|480

    • 图表可以转成图片后通过图片导入

    • 文件兼容性

      • Excel版本：支持Excel 2007+所有版本
      • 第三方软件：LibreOffice、WPS等软件良好兼容
      • 移动端：生成的文件在移动Excel应用中正常显示
  • ❌ xlsx-js-style - SheetJS样式增强版
    • 基本关系：基于SheetJS的fork版本，专门添加样式支持
    • 样式能力：支持字体、背景、边框、对齐等基础样式
    • 局限性：基于较旧版本SheetJS，更新较慢，复杂样式支持有限
    • 适用场景：需要基础样式但不需要图片、图表等高级功能
    • 之前用过
  • ❌ Luckysheet 导出分析 → 还是会有授权的限制
    • 基础样式导出：支持字体、颜色、背景等基础样式，成功率约85%
    • 图片支持：❌ 完全不支持图片和图表导出
    • 条件格式：仅保留当前显示效果，条件规则丢失
    • 富文本：支持基础富文本，复杂格式会简化
导出功能ExcelJSxlsx-js-styleLuckysheetUniver
基础样式✅ 100%✅ 90%✅ 85%✅ 90%
单元格合并✅ 100%✅ 95%✅ 100%✅ 100%
图片插入✅ 90%❌ 0%❌ 0%✅ 70%
图表支持⚠️ 需转图片❌ 0%❌ 0%⚠️ 基础支持
条件格式✅ 85%❌ 0%⚠️ 30%✅ 90%
数据验证✅ 90%❌ 0%❌ 0%✅ 85%
富文本✅ 100%⚠️ 20%⚠️ 40%✅ 100%

7. 云服务 API 方案分析

云服务API的本质是将Excel处理能力托管到云端，通过HTTP接口提供服务：

云服务样式兼容性功能完整性集成难度成本水平适用场景
Microsoft100%⭐⭐⭐⭐⭐⭐⭐⭐高企业级应用
WPS开放平台95%⭐⭐⭐⭐⭐⭐⭐⭐中国内企业
腾讯文档API90%⭐⭐⭐⭐⭐⭐⭐低中小企业

主要问题还是开发成本上和 费用上，不可取 ❌

8. 最终选择

  • 导入：Luckysheet
  • 查看：Luckysheet
  • 在线编辑：Luckysheet
  • 导出：
    • 没有样式要求：Sheet
    • ExcelJS

以上只是列举了一些前端相关的库，其实其他语言比如 Java 、go 解析 excel 成熟的库很多