SpreadJS+GCExcel全栈解决方案--协同编辑的框架搭建（一）

收藏

协同编辑表格是电子表格技术中比较高级的应用场景之一，本次新冠疫情也将协同办公推向了风口。
本身，协同编辑表格并不是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

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

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

dingm · dingm

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

前端的操作撤销（ctrl+z）、恢复（ctrl+y）是有一个操作队列来支持，后端怎么同步做处理呢？

Clark.Pan · Clark.Pan

后端自己来维护操作队列。
这里要说的是，SpreadJS本身的undo和redo机制就不支持协同，所以即便是前端来做，也需要你自己维护和实现undo redo的功能。

dingm · dingm

Clark.Pan 发表于 2023-8-2 18:03
后端自己来维护操作队列。
这里要说的是，SpreadJS本身的undo和redo机制就不支持协同，所以即便是前端来做 ...

请问有没有已经实现过的demo呢？

Clark.Pan · Clark.Pan

没有，这里是需要用户根据实际情况二次开发的部分。

		自动登录	找回密码
密码			立即注册

SpreadJS+GCExcel全栈解决方案--协同编辑的框架搭建（一）

4 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄