开源了一款在线电子表格插件,支持一键导入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

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

相关推荐
橙子家28 分钟前
浏览器缓存之【结构化数据库与缓存】: IndexedDB、Cache storage 和 Storage buckets
前端
user205855615181333 分钟前
X6 中边悬浮置顶,规避 `mouseleave` 事件丢失问题
前端
李明卫杭州34 分钟前
CSS aspect-ratio 属性完全指南
前端
Pedantic2 小时前
SwiftUI 手势层级(Gesture Hierarchy)详解
前端
飘尘3 小时前
前端转型全栈(Java后端)的快速上手指引
前端·后端·全栈
一颗烂土豆3 小时前
Meshopt 压缩深度解析,为什么它比 Draco 更快
前端·javascript·webgl
浏览器工程师4 小时前
AI Agent 接浏览器任务,先别让它一路点到底
前端·后端
雨季mo浅忆4 小时前
VSCode自动格式化三要素
前端
爱勇宝5 小时前
深扒 Anthropic 1680 位工程师简历:应届生几乎没机会,AI 公司最缺的不是博士
前端·后端·程序员