语雀弃用SpreadJs？ExcelJS如何？

　　大家好，很高兴又见面了，我是前端进阶，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
　　前端进阶前言
　　开始介绍ExcelJS之前，先说一个在线表格编辑的研发案例。
　　一开始在做在线表格时，语雀团队采用的是SpreadJs二次开发的模式，后来发现功能越来越难做，维护和开发成本上升。于是，2019年5月语雀团队弃用了SpreadJs，开始自研。所以，本文也不再聚焦SpreadJs（如果有兴趣可以阅读文末资料），而是向大家介绍另一个在线表格控件ExcelJS。话不多说，直接开始。1。什么是ExcelJS？
　　ExcelJS是一个JavaScript包，充当Excel工作簿管理器。根据其官方文档，exceljs可以读取、操作电子表格数据和样式并将其写入XLSX和JSON。它是从Excel电子表格文件作为项目进行逆向工程。
　　ExcelJS具有以下能力：创建工作簿。创建工作表。处理页眉和页脚。设置冻结或拆分视图。设置自动过滤器。对行和列的数据操作。添加数据验证。添加样式。将图像插入工作簿。
　　此外，exceljs更新及时并且完全免费，这一点和handsontable等在线表格解决方案相比确实有比较大的吸引力。2。ExcelJS项目状态
　　从NPM的官方数据来看，ExcelJS的周下载量稳定在699，538左右，同时处于稳定的上升期。
　　ExcelJS项目的NPM的官方数据
　　与ExcelJS的直接竞争者handsontable的周下载量124，151相比，ExcelJS的下载量也有5。6倍之多。
　　ExcelJS的直接竞争者handsontable的周下载量
　　同时，从Github的统计数据来看，项目的star达到了惊人的10。6k，而且fork数量也达到了1。4K。
　　而同类产品handsontable的star达到了17。5k，fork数量也达到了2。8k。从这点来说，Github的数据指标和NPM的真实下载量之间还是有一定的差异。不过，也从侧面反映了handsontable、ExcelJS都是非常优秀的在线表格开发工具。3。ExcelJS使用3。1不同环境安装ExcelJSconstExcelJSrequire（exceljs）；
　　如果在Node环境使用，还需要导入相应的polyfill。exceljs需要导入的polyfillrequire（corejsmoduleses。promise）；require（corejsmoduleses。string。includes）；require（corejsmoduleses。object。assign）；require（corejsmoduleses。object。keys）；require（corejsmoduleses。symbol）；require（corejsmoduleses。symbol。asynciterator）；require（regeneratorruntimeruntime）；基础polyfillconstExcelJSrequire（exceljsdistes5）；3。2如何使用ExcelJS创建一个新的工作簿
　　通过如下代码可以快速创建工作簿。constworkbooknewExcelJS。Workbook（）；添加工作簿属性workbook。creatorNgWaiFoong；workbook。lastModifiedByBot；workbook。creatednewDate（2021，8，30）；workbook。modifiednewDate（）；workbook。lastPrintednewDate（2021，7，27）；添加新工作表
　　可以通过以下代码将新工作表添加到之前创建的工作簿中：constworksheetworkbook。addWorksheet（NewSheet）；红色标签颜色constworksheetworkbook。addWorksheet（NewSheet，｛properties：｛tabColor：｛argb：FFC0000｝｝｝）；隐藏网格线constworksheetworkbook。addWorksheet（NewSheet，｛views：〔｛showGridLines：false｝〕｝）；冻结第一行和第一列constworksheetworkbook。addWorksheet（NewSheet，｛views：〔｛state：frozen，xSplit：1，ySplit：1｝〕｝）；pageSetup设置为A4横向constworksheetworkbook。addWorksheet（NewSheet，｛pageSetup：｛paperSize：9，orientation：landscape｝｝）；页眉和页脚constworksheetworkbook。addWorksheet（NewSheet，｛headerFooter：｛oddFooter：PagePofN；，oddHeader：OddPage｝｝）；文件输入输出
　　exceljs提供了一些辅助函数，用于根据用例读取和加载文件。一般来说，它分为：filestreambuffer
　　请注意，与文件IO相关的操作会返回一个Promise，并且必须与await关键字一起调用。如果您在函数内部使用它，请确保将函数设置为异步。
　　假设你有一个本地的excel文件，可以按如下方式进行读写：file读取awaitworkbook。xlsx。readFile（filename）；file写awaitworkbook。xlsx。writeFile（filename）；
　　如果有数据流，可以使用以下代码片段：读取streamawaitworkbook。xlsx。read（stream）；写streamawaitworkbook。xlsx。write（stream）；
　　在处理缓冲区时，您应该改为调用load和writeBuffer函数：buffer读取awaitworkbook。xlsx。load（data）；buffer写constbufferawaitworkbook。xlsx。writeBuffer（）；
　　这是读取上传的excel文件的示例。fileList是从input标签中获取的FileList对象。只需实例化一个新的二进制大对象（BLOB）并获取底层缓冲区。然后，将其传递给加载函数，如下所示：constblobnewBlob（〔fileList〔0〕〕，｛type：applicationvnd。openxmlformatsofficedocument。spreadsheetml。sheet；charsetutf8｝）；constbufferawaitblob。arrayBuffer（）；constworkbooknewExcelJS。Workbook（）；awaitworkbook。xlsx。load（buffer）；4。本文总结
　　本文主要和大家介绍下Excel工作簿管理器的JavaScript包exceljs，同时给出了几个简单的用法示例。因为笔者也没有在生产项目中使用、部署过exceljs，所以只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。
　　参考资料
　　https：github。comexceljsexceljs
　　https：github。comhandsontablehandsontable
　　https：builtin。comsoftwareengineeringperspectivesexceljs
　　ttps：www。grapecity。com。cndeveloperspreadjs