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

大家好, 我是徐小夕. 之前一直在社区分享零代码 &低代码的技术实践,也陆陆续续设计并开发了多款可视化搭建产品,比如:

  • H5-Dooring(页面可视化搭建平台)
  • Flowmix/Docx 多模态文档编辑器

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

我已经把完整实现代码开源,如果大家对这个项目感兴趣,可以在文末参考github地址。

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

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

js 复制代码
// 初始化电子表格编辑器
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,保证用户侧以最少的心智负担实现复杂的在线电子表格编辑,源码结构如下:

目前这个在线电子表格我已经实现的功能有:

  • 导入excel文件
  • 支持国际化文案配置
  • 支持事件监听
  • 支持操作日志

操作日志效果如下:完整的功能特性如下:

同时我也上传到gitee上了一份,大家感兴趣的可以参考体验一下:

gitee.com/lowcode-chi...

最后

最近我们基于flowmix/docx文档编辑器做了一款智能文档引擎, 叫灵语文档, 这里简单和大家分享一下:

大家可以基于它轻松打造类似飞书文档和钉钉文档的专业级文档管理系统.

文档演示地址: mindlink.turntip.cn

如果大家有好的想法和问题,也欢迎留言区反馈~

相关推荐
Awu122719 小时前
⚡IndexedDB:现代Web应用的高性能本地数据库解决方案
前端·indexeddb
似水流年_zyh19 小时前
canvas写一个选择音频区域的组件
前端·canvas
无限进步_19 小时前
【数据结构&C语言】对称二叉树的递归之美:镜像世界的探索
c语言·开发语言·数据结构·c++·算法·github·visual studio
wordbaby19 小时前
TanStack Router 实战:如何优雅地实现后台管理系统的“多页签” (TabList) 功能
前端·react.js
凌览20 小时前
2026年1月编程语言排行榜|C#拿下年度语言,Python稳居第一
前端·后端·程序员
user861581857815420 小时前
Element UI 表格 show-overflow-tooltip 长文本导致闪烁的根本原因与解法
前端
不会写前端的小丁20 小时前
前端首屏渲染性能优化小技巧
前端
还不秃顶的计科生20 小时前
defaultdict讲解
开发语言·javascript·ecmascript
晴虹20 小时前
lecen:一个更好的开源可视化系统搭建项目--组件和功能按钮的权限控制--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一
前端·后端·低代码
爱分享的鱼鱼20 小时前
Pinia 深度解析:现代Vue应用状态管理最佳实践
前端·后端