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

　　大家好，很高兴又见面了，我是＂ 高级前端 进阶  ＂，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
　　高级前端 进阶前言
　　开始介绍 具体的前端表格方案之前，先说一个在线表格编辑的研发案例。
　　一开始在做在线表格时，语雀团队采用的是＂ SpreadJs+二次开发 ＂的模式，后来发现功能越来越难做，维护和开发成本上升。于是，2019年5月语雀团队弃用了SpreadJs，开始自研。所以，本文也不再聚焦SpreadJs（如果有兴趣可以阅读文末资料），而是向大家介绍一些可行的前端在线表格解决方案 。
　　话不多说，直接开始！Handsontable
　　Handsontable 是一个 JavaScript 组件，它将数据网格功能与类似电子表格的用户体验相结合。提供数据绑定、数据验证、过滤、排序和 CRUD 操作，可以在React、Angular、Vue等前端技术栈中使用。
　　数以千计的商业应用程序依靠 Handsontable 来输入、编辑、验证、清理来自远程源（例如数据库和 API）或来自 HTML 文档、Excel 文件、Google 表格和手动输入的数据。
　　Handsontable数据处理流程
　　Handsontable的表格解决方案有以下明显的优势：提供所有电子表格功能对开发人员友好的 API性能保证
　　而且使用起来也是非常简单：import Handsontable from ＂handsontable＂; import ＂handsontable/dist/handsontable.full.min.css＂; // 导入Handsontable const container = document.querySelector(＂#example＂); const hot = new Handsontable(container, {   data: [     [＂＂, ＂Tesla＂, ＂Volvo＂, ＂Toyota＂, ＂Ford＂],     [＂2019＂, 10, 11, 12, 13],     [＂2020＂, 20, 11, 14, 13],     [＂2021＂, 30, 15, 12, 13]   ],   rowHeaders: true,   colHeaders: true,   licenseKey: ＂non-commercial-and-evaluation＂    // 商业使用需要 });
　　目前 Handsontable 在Github上有17.6k的star、2.9k的fork、超过4.7k的项目依赖它，代码贡献者人数超过100+。从NPM的使用数据来看，最近周下载量也达到了124k左右，而且基本维持稳定。ExcelJS
　　ExcelJS 是一个 JavaScript 包，充当 Excel 工作簿管理器。 根据其官方文档，exceljs 可以读取、操作电子表格数据和样式并将其写入 XLSX 和 JSON。 它是从 Excel 电子表格文件作为项目进行逆向工程。
　　ExcelJS具有以下能力： 创建工作簿。创建工作表。处理页眉和页脚。设置冻结或拆分视图。设置自动过滤器。对行和列的数据操作。添加数据验证。添加样式。将图像插入工作簿。
　　此外，exceljs 更新及时并且完全免费，这一点和handsontable等在线表格解决方案相比确实有比较大的吸引力。
　　exceljs的使用也非常简单，比如下面的例子：const ExcelJS = require(＂exceljs＂); const workbook = new ExcelJS.Workbook(); // 创建工作簿 workbook.creator = ＂Me＂; workbook.lastModifiedBy = ＂Her＂; workbook.created = new Date(1985, 8, 30); workbook.modified = new Date(); workbook.lastPrinted = new Date(2016, 9, 27); // 添加工作表 const sheet = workbook.addWorksheet(＂My Sheet＂, {properties:{tabColor:{argb:＂FFC0000＂}}}); const sheet = workbook.addWorksheet(＂My Sheet＂, {views: [{showGridLines: false}]}); // create a sheet with the first row and column frozen const sheet = workbook.addWorksheet(＂My Sheet＂, {views:[{state: ＂frozen＂, xSplit: 1, ySplit:1}]}); // Create worksheets with headers and footers const sheet = workbook.addWorksheet(＂My Sheet＂, {   headerFooter:{firstHeader: ＂Hello Exceljs＂, firstFooter: ＂Hello World＂} }); // create new sheet with pageSetup settings for A4 - landscape const worksheet =  workbook.addWorksheet(＂My Sheet＂, {   pageSetup:{paperSize: 9, orientation:＂landscape＂} });
　　目前 exceljs 在Github上有10.9k的star、1.4k的fork、超过20.1k的项目依赖它，代码贡献者人数超过160+。
　　从NPM的官方数据来看，ExcelJS的周下载量稳定在 612351左右，同时处于稳定的上升期。与ExcelJS的直接竞争者handsontable的周下载量124,151相比， ExcelJS的下载量也有5.6倍之多。 SheetJS
　　SheetJS提供了经过大量测试的开源表格解决方案，可从几乎所有复杂的电子表格中提取有用的数据，并生成新的电子表格，这些电子表格可以与旧版和现代软件一起使用。
　　SheetJS具有以下明显特性：支持大量数据类型 ：SheetJS 为每种 Excel 文件格式以及 Lotus 1-2-3、Numbers 和 Quattro Pro 提供了一个统一的界面。 SheetJS 提供常见数据问题的解决方案 ：通过 JavaScript 快速处理复杂数据。 SheetJS 无处不在 ：Web 浏览器、服务器、桌面应用程序、移动应用程序、Salesforce 和 Photoshop 插件，甚至在 Excel 中！
　　SheetJS社区版提供了与ReactJS、VueJS、Angular、Svelte、传统框架等不同的集成方案，比如下面是在ReactJS中集成SheetJS的示例：import { read, utils, writeFile } from ＂xlsx＂; import React, { useCallback, useEffect, useState } from ＂react＂; import { read, utils, writeFileXLSX } from ＂xlsx＂;  export default function SheetJSReactAoO() {   /* 组件状态是数组 */   const [pres, setPres] = useState([]);    /* 获取并更新状态一次*/   useEffect(() => { (async() => {     const f = await (await fetch(＂https://sheetjs.com/pres.xlsx＂)).arrayBuffer();     const wb = read(f);      // parse the array buffer     const ws = wb.Sheets[wb.SheetNames[0]];      // 获取第一个工作表     const data = utils.sheet_to_json(ws);      // 生成对象     setPres(data);      // 更新状态   })(); }, []);    /* 获取状态数据并导出到XLSX */   const exportFile = useCallback(() => {     const ws = utils.json_to_sheet(pres);     const wb = utils.book_new();     utils.book_append_sheet(wb, ws, ＂Data＂);     writeFileXLSX(wb, ＂SheetJSReactAoO.xlsx＂);   }, [pres]);    return (     { /* 为数据生成行 */       pres.map(pres => ())     }   
Name
Index
         
{pres.Name}
         
{pres.Index}
       
     Export XLSX   
); }
　　更多关于SheetJS的用法可以参考文末资料，这里不再具体展开。
　　目前 SheetJS 在Github上有32.5k的star、8k的fork、超过129k的项目依赖它，代码贡献者人数超过180+。
　　从NPM的官方数据来看，SheetJS的周下载量稳定在1,701,405 左右，同时处于稳定的上升期。与 SheetJS的直接竞争者handsontable的周下载量124,151相比， SheetJS的下载量是它的13.8倍之多，是ExcelJS的3倍之多 ！这一点通过下面的图就很容易看出来。
　　SheetJS vs. handsontable vs. ExcelJS 周下载量
　　当然，从MINIFIED + GZIPPED后代码体积来看，handsontable（33.2k）>  ExcelJS（259.1k） >  SheetJS（135.5k），所以相当于SheetJS用更少的代码实现了更复杂的功能。当然，如果考虑到按需加载，这一点可能并不构成最终选择SheetJS的直接理由，大家需要视情况而定。
　　node-xlsx
　　node-xlsx是简单的 excel 文件解析器和生成器，用于Node环境，具有以下特征： 依靠 SheetJS xlsx 模块来解析/构建 excel 表格。 使用 TypeScript 构建，用于对库中导出的类型进行静态类型检查。
　　使用node-xlsx也是非常简单，下面示例通过node-xlsx解析一个 xlsx 文件： import xlsx from ＂node-xlsx＂; // Or var xlsx = require(＂node-xlsx＂).default; // Parse a buffer const workSheetsFromBuffer = xlsx.parse(fs.readFileSync(`${__dirname}/myFile.xlsx`)); // 解析文件 const workSheetsFromFile = xlsx.parse(`${__dirname}/myFile.xlsx`);
　　下面示例使用使用node-xlsx构建一个xlsx文件：import xlsx from ＂node-xlsx＂; // Or var xlsx = require(＂node-xlsx＂).default; const data = [   [1, 2, 3],   [true, false, null, ＂sheetjs＂],   [＂foo＂, ＂bar＂, new Date(＂2014-02-19T14:30Z＂), ＂0.3＂],   [＂baz＂, null, ＂qux＂], ]; var buffer = xlsx.build([{name: ＂mySheetName＂, data: data}]); // Returns a buffer
　　更多node-xlsx的用法可以参考文末资料。
　　目前 node-xlsx 在Github上有2.6k的star、270+的fork、超过10.9k的项目依赖它，代码贡献者人数20+，是一个值得关注的项目。
　　本文总结
　　本文主要和大家介绍下SheetJS 、exceljs 、handsontable、node-xlsx 等不同的前端表格解决方案。相信通过本文的比较，大家对SheetJS 、exceljs 、handsontable、node-xlsx 都会有一个初步的了解。在下次前端表格项目中也能有一个充分的、择优的考量！
　　因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！
　　参考资料
　　https://github.com/handsontable/handsontable
　　https://www.toutiao.com/article/7196542723220931087/
　　https://github.com/exceljs/exceljs
　　https://github.com/SheetJS/sheetjs
　　https://docs.sheetjs.com/docs/demos/frontend/react
　　https://www.grapecity.com.cn/developer/spreadjs
　　https://github.com/mgcrea/node-xlsx