526互联

「续」2023年前端WebExcel表格4+热门方案！

发布时间 2023-08-31 11:07:37作者: 漫思

「续」2023年前端WebExcel表格4+热门方案！

原创2023-05-15 05:20·高级前端进阶

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

高级前端进阶

前言

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

一开始在做在线表格时，语雀团队采用的是“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