开源了一款在线电子表格插件，支持一键导入excel文件！

最新推荐文章于 2025-04-04 20:50:29 发布

徐小夕@趣谈前端

最新推荐文章于 2025-04-04 20:50:29 发布

阅读量324

点赞数 4

文章标签： excel

本文链接：https://blog.csdn.net/KlausLily/article/details/146411058

版权

hi, 大家好, 我是徐小夕.

之前一直在社区分享零代码&低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如：

最近在研发和设计在线办公产品时，研究了一下在线电子表格的实现方案，花了半天时间写了一个在线电子表格的js插件，方便大家轻松集成到自己的项目中，demo如下：

我已经把完整实现代码开源，如果大家对这个项目感兴趣，可以在公众号私信“源码”。

下面我就来介绍一下我开源的这款在线电子表格插件。

其实在线电子表格在国内外有一些开源的项目，但是使用成本上相对较高，所以我目前实现的方案就是基于 x-spreadsheet，封装成了一个开箱即用的js插件，方便大家轻松集成到vue和react项目中，使用方式如下：

// 初始化电子表格编辑器const editor = new SpreadsheetEditor('#spreadsheet', {    showToolbar: true,    showGrid: true,    showContextmenu: true});// 注册事件监听editor.on('ready', () => {    addLog('ready', '电子表格编辑器已准备就绪');});// 内容改变的事件editor.on('change', (data) => {    addLog('change', '数据已更改');});

其中 SpreadsheetEditor 就是我设计的js类，我采用了大量的设计模式和js类继承的方式来设计和封装 SOP，保证用户侧以最少的心智负担实现复杂的在线电子表格编辑，源码结构如下：