「续」2023年前端WebExcel表格4+热门方案！
「续」2023年前端WebExcel表格4+热门方案！
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!
高级前端进阶
前言
开始介绍具体的前端表格方案之前，先说一个在线表格编辑的研发案例。
一开始在做在线表格时，语雀团队采用的是“SpreadJs+二次开发”的模式，后来发现功能越来越难做，维护和开发成本上升。于是，2019 年 5 月语雀团队弃用了 SpreadJs，开始自研。所以，本文也不再聚焦 SpreadJs（如果有兴趣可以阅读文末资料），而是向大家介绍一些可行的前端在线表格解决方案。
前面发表的文章已经单独介绍了几种在线表格方案，文章传送门如下，大家一定要记得去看，都是顶级的在线表格存在：
看评论区，有粉丝又推荐了几款在线表格解决方案，而且有两个方案还是国内开发者创建、维护的，看来大家还是比较认可。因此，我又去针对这几种表格方案单独去了解了下，整理成这篇文章分享给大家，希望对大家的实际场景有帮助。
话不多说，直接开始！
1.Luckysheet
1.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='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></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-populate
2.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 workbook
XlsxPopulate.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 workbook
XlsxPopulate.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都会有一个初步的了解。在下次前端表格项目中也能有一个充分的、择优的考量！
因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！
参考资料
https://github.com/dream-num/Luckysheet
https://github.com/dtjohnson/xlsx-populate
https://github.com/sail-sail/ejsExcel
https://dream-num.github.io/LuckysheetDocs/guide/#introduction
https://github.com/protobi/js-xlsx
https://www.grapecity.com.cn/developer/spreadjs
