找回密码
 立即注册

QQ登录

只需一步,快速开始

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2020-11-1 23:22  /   查看:6517  /  回复:4
协同编辑表格是电子表格技术中比较高级的应用场景之一,本次新冠疫情也将协同办公推向了风口。
本身,协同编辑表格并不是SpreadJS与GCExcel源生支持的功能,所在实现协同的操作需要在控件的基础上做很多额外的扩展。

本次教程将以一个简单的框架来讲解SpreadJS和GCExcel在整个协同编辑场景中起到的作用。希望能起到一个抛转引玉的效果。

首先,从框架搭建上,本示例采用当下流行的前后端分离的开发方式,前端使用npm作为脚手架搭建React框架。 后端使用Java的SpringBoot作为后端框架。

前端使用SpreadJSV14.0.0以及SpreadJS在线表格编辑器react组件版作为前端操作的平台

后端使用GCExcel作为文档的终端处理,随时提供备份与恢复。

首先,前端新建react项目,并按照下面图所示引入SpreadJS以及设计器组件版的相关引用
image.png534185180.png

然后,集成在线表格编辑器react组件版

image.png358379210.png

这样前端的准备工作就完成了。

后端的准备工作,首先安装gradle作为包管理器。当然,这里也可以用其他工具来代替,例如maven,或者源生引入jar包的方式将需要用到的jar包引入进来。
之后创建springboot工程配合搭建gradle引用GCExcel以及后面协同需要用到的websocket。
image.png388440551.png

这样后端的准备工作也完成了。

以上就是第一部分,基础环境的搭建。
接下来我们会讲到核心代码的构建。

4 个回复

倒序浏览
dingm
注册会员   /  发表于:2023-8-2 16:34:47
沙发
后端使用GCExcel作为文档的终端处理,随时提供备份与恢复。

前端的操作撤销(ctrl+z)、恢复(ctrl+y)是有一个操作队列来支持,后端怎么同步做处理呢?
回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2023-8-2 18:03:10
板凳
后端自己来维护操作队列。
这里要说的是,SpreadJS本身的undo和redo机制就不支持协同,所以即便是前端来做,也需要你自己维护和实现undo redo的功能。
回复 使用道具 举报
dingm
注册会员   /  发表于:2023-8-3 10:09:46
地板
Clark.Pan 发表于 2023-8-2 18:03
后端自己来维护操作队列。
这里要说的是,SpreadJS本身的undo和redo机制就不支持协同,所以即便是前端来做 ...

请问有没有已经实现过的demo呢?
回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2023-8-3 10:13:55
6#
没有,这里是需要用户根据实际情况二次开发的部分。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部