共享表格怎样实现多人编辑,共享表格怎样实现多人编辑手机

不少人想知道共享表格怎样实现多人编辑这些题，以及共享表格怎样实现多人编辑手机的话题，想必很多人都想知道，接下来听小编详解。

SpreadJS是葡萄城结合40多年电子表格应用领域专业控制技术和经验推出的纯前端表格控件。SpreadJS这个类似Excel的控件是如何实现当今流行的表单集成的呢？本文对此进行了简要介绍。

首先，从构建框架的角度来看，本示例采用了前后端分离，这是当今常见的开发实践，前端使用npm作为脚手架来构建Svelte框架。后端使用Java的SpringBoot作为后端框架。前端采用SpreadJSV1525和SpreadJS在线表格编辑器Designer作为前端操作，后端采用GCExcel作为文档端处理，提供随时备份和恢复。

首先我们介绍一下前端Svelte框架下构建的SpreadJS在线表格编辑器。

1.在你的pageagejson文件中引入相关的SpreadJS资源

34;34;34;34;34;34;34;34;34;34;34;34;34;34;34;34;34;34;34;34;34;34;34;34;34;2.然后集成在线表单编辑器Svelte组件版本。在我之前的文章中，我展示了如何在Svelte框架中实现在线表格编辑器。

按照这个想法，创建一个新的SpreadSheetsvelte文件并将其写入基本的在线表单编辑器。

从39导入；导入39;导入34;导入39;导入39;导入39;导入39;导入39;从39作为GC导入；从39作为GCDesigner导入；让设计者=null;onMountasync=gt;lt;/scriptgt;lt;divid=34;class=34;gt;lt;/divgt;lt;stylescopedgt;导入34;导入39;设计器主机lt;/stylegt;3.协作文档可能有多个。我们需要创建一个文档列表页面OnlineSheetssvelte，因为我们需要在页面上创建一个文档列表，以便用户可以选择要编辑的文档。该页面需要实现路由跳转，加载文档数据。

这里我们使用svelte-spa-router进行路由跳转，使用isomorphic-fetch进行前后端数据提交。

从39导入；从34导入；从34导入；letdocList=[];aria-labelledby=34;gt;lt;theadgt;lt;trgt;lt;thgt;Documentlt;/thgt;lt;thgt;lt;/thgt;lt;/trgt;lt;/theadgt;lt;tbodygt;lt;trgt;lt;tdgt;lt;/tdgt;lt;tdgt;lt;/tdgt;lt;tdclassName=39;gt;trgt;lt;/tbodygt;lt;/tablegt;lt;/maingt;以上代码使用lt;ause:link=gt;Openlt;/agt;实现文档列表显示和文档跳转。在线表格编辑器。

至此，相关的前端内容就准备好了，接下来就是后端的工作搭建了。

要准备后端，首先安装gradle作为包管理器。当然这里也可以使用其他工具来代替，比如maven或者从源导入需要使用的jar包的方式。接下来，创建一个Springboot项目，配合构建Gradle来引用GCExcel和后续协作所需的WebSocket。

250lt;/版本>;lt;/依赖项>lt;/依赖项>底部。接下来我将向您展示如何构建webSocket。

在SpreadSheetsvelte文件中编写以下代码以建立webSocket链接。

函数connectDocumentdocNamevarws=newWebSocketUtilitywebSocketUrl;//39;wsonopen=函数wssendJSONstringifydata;wsonmessage=onmessage;webSocket=ws;

接下来我们需要监控前端发出的操作。在这里，在线表单编辑器本身封装了您所做的一切，为您节省了大量精力。

onMountasync=gt;根据cmd判断，对命令进行简单封装，将封装后的命令发送到服务器，通过WebSockets发送同步命令。

函数onCommandExecuteargs中断；案例UtilityServerCommandsResizeRow:ServerCommand=;中断；案例UtilityServerCommandsResizeColumn:ServerCommand=;中断；CommandsSetFontSize:案例39;+UtilityServerCommandsSetBackColor:案例39;60案例39;+UtilityServerCommandsSetFontStyle:案例39;+UtilityServerCommandsSetUnderline第章39；+UtilityServerCommandsSetDoubleUnderline:if===-1中断；案例UtilityServerCommandsMoveFloatingObjects:ServerCommand=;中断；erverCommandsResizeFloatingObjects:ServerCommand=;中断；案例UtilityServerCommandsInsertColumns:案例UtilityServerCommandsInsertRows:ServerCommand=;中断；Commandcmd=cmd;ServerCommanddocID=paramsfileName;UtilityExecuteCommandAtServerServerCommand;commanddocID=ServerCommanddocID;webSocketsendJSONstringifycommand当合作者通过WebSocket接收请求时，使用onmessage方法创建同步命令。现在，为了避免发送WebSocket并创建无限循环，我们需要在协作端执行命令之前取消之前的监视。执行后再次添加监听。

functiononmessagemessage至此，协作的基本内容已经搭建完成。让我们看看编辑单元格内容后会发生什么。

修改单元格E4的内容，同时打开ConsoleNetwork选项卡，如下图所示。

将单元格E4中的值从2500更改为2000将同时触发EditCell事件

关于共享表格怎样实现多人编辑和共享表格怎样实现多人编辑手机的一些题，本文已经做了详细的解，希望大家喜欢。