大家好，很高兴又见面了，我是高级前端进阶，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！ 高级前端进阶前言 开始介绍具体的前端表格方案之前，先说一个在线表格编辑的研发案例。 一开始在做在线表格时，语雀团队采用的是SpreadJs二次开发的模式，后来发现功能越来越难做，维护和开发成本上升。于是，2019年5月语雀团队弃用了SpreadJs，开始自研。所以，本文也不再聚焦SpreadJs（如果有兴趣可以阅读文末资料），而是向大家介绍一些可行的前端在线表格解决方案。 话不多说，直接开始！Handsontable Handsontable是一个JavaScript组件，它将数据网格功能与类似电子表格的用户体验相结合。提供数据绑定、数据验证、过滤、排序和CRUD操作，可以在React、Angular、Vue等前端技术栈中使用。 数以千计的商业应用程序依靠Handsontable来输入、编辑、验证、清理来自远程源（例如数据库和API）或来自HTML文档、Excel文件、Google表格和手动输入的数据。 Handsontable数据处理流程 Handsontable的表格解决方案有以下明显的优势：提供所有电子表格功能对开发人员友好的API性能保证 而且使用起来也是非常简单：importHandsontablefromhandsontable；importhandsontabledisthandsontable。full。min。css；导入Handsontableconstcontainerdocument。querySelector（example）；consthotnewHandsontable（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：noncommercialandevaluation商业使用需要｝）； 目前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的使用也非常简单，比如下面的例子：constExcelJSrequire（exceljs）；constworkbooknewExcelJS。Workbook（）；创建工作簿workbook。creatorMe；workbook。lastModifiedByHer；workbook。creatednewDate（1985，8，30）；workbook。modifiednewDate（）；workbook。lastPrintednewDate（2016，9，27）；添加工作表constsheetworkbook。addWorksheet（MySheet，｛properties：｛tabColor：｛argb：FFC0000｝｝｝）；constsheetworkbook。addWorksheet（MySheet，｛views：〔｛showGridLines：false｝〕｝）；createasheetwiththefirstrowandcolumnfrozenconstsheetworkbook。addWorksheet（MySheet，｛views：〔｛state：frozen，xSplit：1，ySplit：1｝〕｝）；Createworksheetswithheadersandfootersconstsheetworkbook。addWorksheet（MySheet，｛headerFooter：｛firstHeader：HelloExceljs，firstFooter：HelloWorld｝｝）；createnewsheetwithpageSetupsettingsforA4landscapeconstworksheetworkbook。addWorksheet（MySheet，｛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文件格式以及Lotus123、Numbers和QuattroPro提供了一个统一的界面。SheetJS提供常见数据问题的解决方案：通过JavaScript快速处理复杂数据。SheetJS无处不在：Web浏览器、服务器、桌面应用程序、移动应用程序、Salesforce和Photoshop插件，甚至在Excel中！ SheetJS社区版提供了与ReactJS、VueJS、Angular、Svelte、传统框架等不同的集成方案，比如下面是在ReactJS中集成SheetJS的示例：import｛read，utils，writeFile｝fromxlsx；importReact，｛useCallback，useEffect，useState｝fromreact；import｛read，utils，writeFileXLSX｝fromxlsx；exportdefaultfunctionSheetJSReactAoO（）｛组件状态是数组const〔pres，setPres〕useState（〔〕）；获取并更新状态一次useEffect（（）｛（async（）｛constfawait（awaitfetch（https：sheetjs。compres。xlsx））。arrayBuffer（）；constwbread（f）；parsethearraybufferconstwswb。Sheets〔wb。SheetNames〔0〕〕；获取第一个工作表constdatautils。sheettojson（ws）；生成对象setPres（data）；更新状态｝）（）；｝，〔〕）；获取状态数据并导出到XLSXconstexportFileuseCallback（（）｛constwsutils。jsontosheet（pres）；constwbutils。booknew（）；utils。bookappendsheet（wb，ws，Data）；writeFileXLSX（wb，SheetJSReactAoO。xlsx）；｝，〔pres〕）；return（tabletheadthNameththIndexththeadtbody｛为数据生成行pres。map（pres（trtd｛pres。Name｝tdtd｛pres。Index｝tdtr））｝tbodytfoottdcolSpan｛2｝buttononClick｛exportFile｝ExportXLSXbuttontdtfoottable）；｝ 更多关于SheetJS的用法可以参考文末资料，这里不再具体展开。 目前SheetJS在Github上有32。5k的star、8k的fork、超过129k的项目依赖它，代码贡献者人数超过180。 从NPM的官方数据来看，SheetJS的周下载量稳定在1，701，405左右，同时处于稳定的上升期。与SheetJS的直接竞争者handsontable的周下载量124，151相比，SheetJS的下载量是它的13。8倍之多，是ExcelJS的3倍之多！这一点通过下面的图就很容易看出来。 SheetJSvs。handsontablevs。ExcelJS周下载量 当然，从MINIFIEDGZIPPED后代码体积来看，handsontable（33。2k）ExcelJS（259。1k）SheetJS（135。5k），所以相当于SheetJS用更少的代码实现了更复杂的功能。当然，如果考虑到按需加载，这一点可能并不构成最终选择SheetJS的直接理由，大家需要视情况而定。 nodexlsx nodexlsx是简单的excel文件解析器和生成器，用于Node环境，具有以下特征：依靠SheetJSxlsx模块来解析构建excel表格。使用TypeScript构建，用于对库中导出的类型进行静态类型检查。 使用nodexlsx也是非常简单，下面示例通过nodexlsx解析一个xlsx文件：importxlsxfromnodexlsx；Orvarxlsxrequire（nodexlsx）。default；ParseabufferconstworkSheetsFromBufferxlsx。parse（fs。readFileSync（｛dirname｝myFile。xlsx））；解析文件constworkSheetsFromFilexlsx。parse（｛dirname｝myFile。xlsx）； 下面示例使用使用nodexlsx构建一个xlsx文件：importxlsxfromnodexlsx；Orvarxlsxrequire（nodexlsx）。default；constdata〔〔1，2，3〕，〔true，false，null，sheetjs〕，〔foo，bar，newDate（20140219T14：30Z），0。3〕，〔baz，null，qux〕，〕；varbufferxlsx。build（〔｛name：mySheetName，data：data｝〕）；Returnsabuffer 更多nodexlsx的用法可以参考文末资料。 目前nodexlsx在Github上有2。6k的star、270的fork、超过10。9k的项目依赖它，代码贡献者人数20，是一个值得关注的项目。 本文总结 本文主要和大家介绍下SheetJS、exceljs、handsontable、nodexlsx等不同的前端表格解决方案。相信通过本文的比较，大家对SheetJS、exceljs、handsontable、nodexlsx都会有一个初步的了解。在下次前端表格项目中也能有一个充分的、择优的考量！ 因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！ 参考资料 https：github。comhandsontablehandsontable https：www。toutiao。comarticle7196542723220931087 https：github。comexceljsexceljs https：github。comSheetJSsheetjs https：docs。sheetjs。comdocsdemosfrontendreact https：www。grapecity。com。cndeveloperspreadjs https：github。commgcreanodexlsx
48家券商合计降薪超百亿，中金公司人均每月少拿2万作者：安卓在金融业内，证券公司从业人员的收入之高有目共睹，实力碾压银行业、保险业、信托业7月底，中金公司一名交易员家属晒出丈夫的收入证明，这名员工以8。25万元的月……海清0票的海清已被观众抛弃，演员除了演技，更重要的是初心如果说演员身上有什么标签是观众熟知的，那海清的国民媳妇无疑是大家最为熟悉的。06年，29岁的海清主演的《双面胶》开始给海清贴上了媳妇专业户的印记，直至现在10几年的演员生涯。……探秘定制家居未来工厂无人车间如何做到年产值5。72亿？提到制造工厂，很多人会联想到轰隆运转的机器、漫天粉尘和忙碌的工人，而步入这座全新未来工厂车间时见到的却是另外一番景象：整个车间干净整洁、几乎没有工人，机器与机器之间似乎达成一种……A股明天（9月5日）大盘走势分析预测A股看上去很简单，其实有些时候则是扑朔迷离，让人一头雾水，明天的走势即是如此。整个周末也没有看到有分量的利好出台，这对极度依赖利好炒作的A股来说，无疑缺乏上涨的动力，再加上利空……探寻北京文化旅游体验基地修德谷传统文化体验基地和诗书开世传统为充分展示北京丰富的文化旅游资源，加快推动文化和旅游在更广范围、更深层次、更高水平上的深度融合，更好地满足广大游客和市民在旅游活动中日益增长的感知文化和注重体验的需求，2020……蒸鲈鱼时，只要撑握这2步，出锅肉质鲜嫩不腥也不柴，鲜香又下饭三餐美味，四季幸福，大家好！清蒸鲈鱼是很受欢迎的一道美食，鲈鱼中含有丰富的营养物质，食用对身体非常有好处，今天，我要给大家分享一个清蒸鲈鱼的做法，按照我的这个方法，做出来的鲈鱼……十一轮不败！浙江队掀翻中超领头羊经历了连续的延期后，昨晚，浙江队终于在主场迎来中超又一个对手领头羊武汉三镇，这是两队本赛季升级后首次交手。半个多月没有正式比赛的浙江队展现出了理想的状态，2：1力克三镇，将连续……线上服务宕机，码农试用期被毕业，原因竟是给MySQL加个字段1。问题：怎么给线上表加字段？工作中最常遇到的问题，怎么给线上频繁使用的大表添加字段？比如：给下面的用户表（user）添加年龄（age）字段。CREATETABLE……入秋之后，一年中的祛湿黄金期，记得做好这2件事，补好你的脾胃祛湿排痰养脾胃，似乎是当下永不过时的话题。在最近的这段时间里更是特别重要。今天主要跟大家分享两个人体自带的排湿开关，没事动手按按揉揉，或者灸一灸、贴一贴、刮一刮，就能健脾……天热要多吃丝瓜，教你超好吃的做法，赛过大鱼大肉，上桌抢吃光天热要多吃丝瓜，教你超好吃的做法，赛过大鱼大肉，上桌抢吃光。丝瓜口感嫩滑，鲜美多汁，不管是用来炒还是煲汤，都非常的好吃。平时多吃丝瓜有很好的清热化痰，解暑除烦的作用，所以很多朋……科技热点我国研究人员在主动健康领域取得进展随着变革性新技术的应用和经济社会的快速发展，健康需求越来越成为驱动未来经济增长的重要核心驱力，主动健康（proactivehealth）这一新的服务模式应运而生。尽管主动健康理……股民炸锅！巨亏1040万，96本金灰飞烟灭，竟跑赢1。72投中国基金报安曼全网最惨的股民诞生了！一年亏掉1040万元，亏损达96！8月10日，一位网友在微博晒炒股收益，近一年亏1040万元，这张截图引起了网上热议。有网……