大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

高级前端进阶

前言

开始介绍具体的前端表格方案之前，先说一个在线表格编辑的研发案例。

一开始在做在线表格时，语雀团队采用的是“SpreadJs+二次开发”的模式，后来发现功能越来越难做，维护和开发成本上升。于是，2019 年 5 月语雀团队弃用了 SpreadJs，开始自研。所以，本文也不再聚焦 SpreadJs（如果有兴趣可以阅读文末资料），而是向大家介绍一些可行的前端在线表格解决方案。

前面发表的文章已经单独介绍了几种在线表格方案，文章传送门如下，大家一定要记得去看，都是顶级的在线表格存在：

《语雀弃用 SpreadJs？2023 年前端表格 4+ 优秀热门方案！》

看评论区，有粉丝又推荐了几款在线表格解决方案，而且有两个方案还是国内开发者创建、维护的，看来大家还是比较认可。因此，我又去针对这几种表格方案单独去了解了下，整理成这篇文章分享给大家，希望对大家的实际场景有帮助。

话不多说，直接开始！

1.Luckysheet1.1 什么是 Luckysheet

Luckysheet 是一款类似 excel 的在线电子表格，功能强大，配置简单，而且完全开源。Luckysheet 具有以下明显特征：

格式化：样式、条件格式、文本对齐和旋转、文本截断、溢出、自动换行、多种数据类型、单元格分割样式单元格操作：支持拖拽、填充（fill handle）、多选、查找替换、定位、合并单元格、数据校验行和列操作：支持隐藏、插入、删除行或列、冻结和拆分文本操作功能：支持撤销、重做、复制、粘贴、剪切、热键、格式刷、拖放选择公式和函数：支持内置、远程和自定义公式表级功能：支持过滤、排序增强功能：数据透视表、图表、评论、协同编辑、插入图片、矩阵计算、截图、复制为其他格式、EXCEL 导入导出等。

同时，Luckysheet 还支持与 Vue、Vue3、React、Node(koa2)等环境集成，也提供了用于 Excel 导入导出的库（Luckyexcel）、图表插件（chartMix）等等。

1.2 使用 Luckysheet

首先通过 CDN 引入依赖：

<link rel='stylesheet' href='; /><link rel='stylesheet' href='; /><link rel='stylesheet' href='; /><link rel='stylesheet' href='; /><script src=";></script><script src=";></script>

第二步指定表容器：

<div  id="luckysheet"  style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

第三步创建表格：

<script>    $(function () {        //Configuration item        var options = {            container: 'luckysheet'             //luckysheet is the container id        }        luckysheet.create(options)    })</script>

目前 Luckysheet 在 Github 上有 13.3k 的 star、1.9k 的 fork、超过 35+ 的项目依赖它，代码贡献者人数超过 60+。从 NPM 的使用数据来看，最近周下载量为 0.6k 左右，而且基本维持稳定。

从这些数据来看，luckysheet 和以前介绍的表格方案还有一定的差距，但是值得大家持续关注。值得一提的是，这又是一个国人自己的开源项目，值得鼓励。

2.xlsx-populate2.1 什么是 xlsx-populate

xlsx-populate 是用 JavaScript 编写的 Excel XLSX 解析器/生成器，支持 Node.js 和浏览器、jQuery/d3 样式的方法链、加密，并专注于保持现有工作簿功能和样式的完整性。

2.2 如何使用 xlsx-populate

xlsx-populate 具有用于处理 Excel 工作簿的丰富的 API。要在工作簿中填充数据，首先要加载一个数据文件（空白、来自数据或来自文件）。然后可以访问工作簿中的工作表和单元格来操作它们。

const XlsxPopulate = require('xlsx-populate');// Load a new blank workbookXlsxPopulate.fromBlankAsync().then((workbook) => {  // Modify the workbook.  workbook.sheet('Sheet1').cell('A1').value('This is neat!');  // Write to file.  return workbook.toFileAsync('./out.xlsx');});

可以使用 Cell.value 作为不带任何参数的 getter 从现有工作簿中提取数据：

const XlsxPopulate = require('xlsx-populate');// Load an existing workbookXlsxPopulate.fromFileAsync('./Book1.xlsx').then((workbook) => {  // Modify the workbook.  const value = workbook.sheet('Sheet1').cell('A1').value();  // Log the value.  console.log(value);});

xlsx-populate 还支持单元格范围，以允许一次解析/操作多个单元格。

const r = workbook.sheet(0).range('A1:C3');// Set all cell values to the same value:r.value(5);// Set the values using a 2D array:r.value([  [1, 2, 3],  [4, 5, 6],  [7, 8, 9],]);// Set the values using a callback function:r.value((cell, ri, ci, range) => Math.random());

一个常见的用例是一次简单地提取所有值，可以使用 Sheet.usedRange 方法轻松做到这一点。

// Get 2D array of all values in the worksheet.const values = workbook.sheet('Sheet1').usedRange().value();

或者，可以设置一个范围内的值，该范围内只有左上角的单元格：

workbook  .sheet(0)  .cell('A1')  .value([    [1, 2, 3],    [4, 5, 6],    [7, 8, 9],  ]);

更多关于 xlsx-populate 的用法可以继续参考文末资料。目前 xlsx-populate 在 Github 上有 0.85k 的 star、170+ 的 fork、超过 3.5k+ 的项目依赖它，代码贡献者人数超过 20+。

从 NPM 的使用数据来看，xlsx-populate 的最近周下载量为 39k 左右，而且基本维持稳定。从这一点来看，xlsx-populate 还是明显优于上面的 Luckysheet 的，至少使用量是一个很好的证明。

3.其他在线表格方案3.1 ejsExcel

ejsExcel 是 nodejs excel 模板引擎，用于在 nodejs 环境中导出 excel。与 Luckysheet 一样，ejsExcel 是由国内开发者创建、维护的项目。目前 ejsExcel 在 Github 上有大约 0.7k 的 star、100+ 的 fork、超过 200+ 的项目依赖它，npm 周下载量平均 200+。

总体来看，ejsExcel和以前介绍的在线表格项目差距还是比较大的，大家有兴趣的可以通过参考资料继续深入了解下。

3.2 js-xlsx

js-xlsx 是各种电子表格格式的解析器和编写器，来自官方规范和相关文档的纯 JS 实现。这个项目是原始 SheetJS/xlsx 项目的一个分支。 它经过扩展以支持从 .xlsx 工作簿读取和写入单元格格式。 目的是提供一种在实践中使用这些功能的临时方法，并最终将其合并到主要项目中。

目前 js-xlsx 在 Github 上有大约 0.76k 的 star、8k 的 fork、npm 周下载量平均 5.1k+，是一个总体来看值得关注的项目。

4.本文总结

本文主要和大家介绍下Luckysheet、xlsx-populate、ejsExcel、js-xlsx等不同的前端表格解决方案。相信通过本文的比较，大家对Luckysheet、xlsx-populate、ejsExcel、js-xlsx都会有一个初步的了解。在下次前端表格项目中也能有一个充分的、择优的考量！

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料