社区开源web Excel组件的对比分析

关键词

handsontable、 x-data-spreadsheet、 AG-Grid

背景

在项目中引入了handsontable组件，开发过程中反馈打包体积过大，存在布局bug， 所以考虑是否社区有替代组件，故有本文档对社区开源组件进行调研。

收费的组件不在调研范围 。

根据github star数量以及npm下载量综合对需求的契合度，发现 handsontable 、 x-data-spreadsheet、 AG-Grid 三者都能在一定程度上满足我们的需求，也均存在一定的优缺点。

结论在最后，可直接跳过对比分析。

方案对比

• 体积对比

组件	打包大小(webpack)	gzip
AG-Grid	1043kb (大)	222kb
handsontable	402kb （中等）	85kb
x-data-spreadsheet	106kb （小）	32kb

• 社区认可度

组件	stars	npm weekly download
AG-Grid	8.2k	23,073
handsontable	16.4k	93,974
x-data-spreadsheet	12.3k	3,770

• ui对比

组件	基础样式	结论
AG-Grid		样式独特且丰富，可满足各种自定义
handsontable		基础样式单一，扩展性也不错
x-data-spreadsheet		很接近excel,交互方式非常接近

• 功能对比

组件	技术实现	特点	功能	文档
AG-Grid	dom实现	包含快捷键操作；适合内嵌图表、图片、富文本等复杂场景	编辑、过滤、渲染等基础功能；高度定制的表格内容呈现	英文文档；配置项丰富，文档完善
handsontable	基于table实现	表现和Excel相似，支持公式计算等	排序，过滤等基础功能	英文文档，比较完善
x-data-spreadsheet	基于canvas	轻量级、简洁。比较适合做简易版web在线表格编辑器	只读/编辑 模式切换工具栏合并单元格右键菜单样式	中文文档；不够完善，深度自定义配置需要自己读源码

• 易用性和扩展性

组件	易用性	扩展性
AG-Grid	⭐️⭐️⭐️⭐️	能满足复杂需求定制
handsontable	⭐️⭐️⭐️⭐️ ⭐️	能满足复杂需求定制
x-data-spreadsheet	⭐️⭐️⭐️⭐️	只有基础配置，自定义配置需要自己扩展

总结

	推荐度
AG-Grid： 适用于对表格定制要求高，侧重展示的需求	⭐️⭐️⭐️⭐️
handsontable： 综合表现优秀，体积适中，通常的表格编辑需求均能满足	⭐️⭐️⭐️⭐️ ⭐️
x-data-spreadsheet： 适用于快速搭建简单的web Excel的需求	⭐️⭐️⭐️⭐️

目前来看handsontable依然是不错的选择，大小适中，社区活跃，易用性和扩展性变现都还不错。未发现有明显的bug。

备注：

使用第三方组件时，建议使用chuckSplit分包和开启gzip压缩，否则确实会造带宽的过度消耗。