Svelte框架结合SpreadJS实现表单协同文档

时间：2023-03-28 00:05:11 HTML

@import"@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";@import'@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';.designer-host{width:100%;height:100vh;}SpreadJS是葡萄城基于40多年电子表单应用领域的专业控件技术和经验推出的纯前端表单控件。SpreadJS作为一个类Excel控件，是如何实现当前流行的表单协同的呢？本文将简要介绍。首先，从框架搭建的角度，本示例采用了当前流行的前后端分离的开发方式，前端以npm为脚手架搭建Svelte框架。后端使用Java的SpringBoot作为后端框架。前端使用SpreadJSV15.2.5和SpreadJS在线表格编辑器Designer作为前端操作平台，后端使用GCExcel作为文档的终端处理，随时提供备份和恢复。首先介绍一下前端Svelte框架下构建的SpreadJS在线表格编辑器。1、在pageage.json文件中引入相关SpreadJS资源"@grapecity/spread-excelio":"15.2.5","@grapecity/spread-sheets":"15.2.5","@grapecity/spread-sheets-条形码":"15.2.5","@grapecity/spread-sheets-charts":"15.2.5","@grapecity/spread-sheets-designer":"15.2.5","@grapecity/spread-sheets-designer-resources-cn":"15.2.5","@grapecity/spread-sheets-languagepackages":"15.2.5","@grapecity/spread-sheets-pdf":"15.2.5","@grapecity/spread-sheets-pivot-addon":"15.2.5","@grapecity/spread-sheets-pivots":"^14.0.0","@grapecity/spread-sheets-print":"15.2.5","@grapecity/spread-sheets-resources-zh":"15.2.5","@grapecity/spread-sheets-shapes":"15.2.5","@grapecity/spread-sheets-tablesheet":"15.2.5",2.然后，集成在线表单编辑器Svelte组件版本在上一篇文章中，我们介绍了如何在Svelte框架中实现在线表单编辑器。我们按照这个思路创建一个新的SpreadSheet.svelte文件并将其写入基本的在线表单编辑器。

@import"@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";@import'@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';.designer-host{width:100%;height:100vh;}3.可能有多个协作文档，我们需要在页面上创建一个文档列表，让用户选择编辑哪个文档，所以我们需要创建一个文档列表页面OnlineSheets.svelte，在这个页面中，我们需要实现路由跳转和加载文档数据。这里我们使用svelte-spa-router进行路由跳转，使用isomorphic-fetch进行前后端数据传输。

文档{#eachdocListasdocItem}{docItem.index}{docItem.fileName}打开{/each}以上代码实现了文档列表查看和文档跳转。使用Open跳转到之前设计的在线表格编辑器。至此，前端的相关内容就准备好了，接下来就是buildendwork了。要为后端做准备，首先安装gradle作为包管理器。当然这里也可以使用其他工具代替，比如maven，或者源码导入jar包的方式，将需要用到的jar包导入进来。然后创建一个springboot项目配合buildinggradle引用GCExcel和后面协作需要的websocket。<依赖项>org.springframework.bootspring-boot-starter-weborg.springframework.bootspring-boot-starter-testtestorg.springframework.bootspring-boot-starter-tomcat2.4.3org.springframework.bootspring-boot-starter-websocket<版本>2.4.3com.grapecity.documentsgcexcel4.0.3com.google.code.gsongson2.8.6javax.servletjstl1.2org.apache.tomcat.embedtomcat-embed-jasper10.0.2com.jayway.jsonpathjson-path2.5.0像这样，框架的基础环境我们已经搭建好了，接下来介绍如何搭建webSocket在SpreadSheet.svelte文件中写入如下代码建立webSocket链接：functionconnectDocument(docName){if(webSocket!=null){return;}varws=newWebSocket(Utility.webSocketUrl);//'ws://localhost:8090/spreadjs'ws.onopen=function(){vardata={cmd:"connect",docID:docName}ws.send(JSON.stringify(data));}ws.onmessage=onmessage;webSocket=ws;接下来，我们访问文档列表页面，从文档列表页面跳转到文档，进行编辑。接下来我们需要监控前端下发的操作。这里由于在线表单编辑器本身封装了用户可能进行的所有操作，所以省了很多功夫。onMount(async()=>{//初始化设计器designer=newGCDesigner.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));letspread=designer.getWorkbook();//fromJSONopenDocument(docName);//创建webSocketconnectDocument(docName);varcm=spread.commandManager();cm.addListener('myListener',onCommandExecute)});根据cmd判断并对命令做一些简单的封装，然后封装命令发送到服务器，然后通过websocket发送同步命令：functiononCommandExecute(args){console.log(args.command);varcommand=args.command;变种服务器命令=空；开关（command.cmd）{caseUtility.ServerCommands.EditCell:ServerCommand={sheetName:command.sheetName,row:command.row,column:command.col,newValue:command.newValue}break;案例Utility.ServerCommands.ResizeRow:ServerCommand={sheetName:command.sheetName,rows:command.rows,size:command.size};休息;caseUtility.ServerCommands.ResizeColumn:ServerCommand={sheetName:command.sheetName,columns:command.columns,size:command.size};休息;案例“设计师”。+Utility.ServerCommands.SetFontFamily：案例“设计师”。+Utility.ServerCommands.SetFontSize：案例“设计师”。+Utility.ServerCommands.SetBackColor：案例“设计师”。+Utility.ServerCommands.SetForeColor：案例“设计师”。+Utility.ServerCommands.SetFontWeight：案例“设计师”。+Utility.ServerCommands.SetFontStyle：案例“设计师”。+Utility.ServerCommands.SetUnderline:案例'设计师。'+Utility.ServerCommands.SetDoubleUnderline:if(command.value&&command.value.indexOf('undefined')===-1){ServerCommand={sheetName:command.sheetName,selections:command.selections,value:command.value}}休息;caseUtility.ServerCommands.MoveFloatingObjects:ServerCommand={sheetName:command.sheetName,floatingObjects:command.floatingObjects,offsetX:command.offsetX,offsetY:command.offsetY};休息;caseUtility.ServerCommands.ResizeFloatingObjects:ServerCommand={sheetName:command.sheetName,floatingObjects:command.floatingObjects,offsetX:command.offsetX,offsetY:command.offsetY,offsetWidth:command.offsetWidth,offsetHeight:command.offsetHeight};休息;caseUtility.ServerCommands.InsertColumns:caseUtility.ServerCommands.InsertRows:ServerCommand={sheetName:command.sheetName,selections:command.selections};休息;默认值：}if(ServerCommand!=null){varcmd=command.cmd;vardotIndex=cmd.lastIndexOf('.');如果(dotIndex!==-1){cmd=cmd.substring(dotIndex+1);}ServerCommand.cmd=cmd;ServerCommand.docID=params.fileName;Utility.ExecuteCommandAtServer(ServerCommand);命令.docID=ServerCommand.docID;webSocket.send(JSON.stringify(command))}}协作端通过websocket收到请求后，使用onmessage方法进行同步命令。这里需要在协作端执行命令之前取消之前的监听，以免再次发送websocket造成死循环。执行后，再次添加监听器。functiononmessage(message){varcommand=JSON.parse(message.data);命令._styles=null；让spread=designer.getWorkbook()varcm=spread.commandManager();cm.removeListener('myListener');spread.commandManager().execute(命令);cm.addListener('myListener',onCommandExecute);至此，协作基础内容搭建完成，我们来看看编辑单元格内容后会发生什么。如下图，修改E4单元格内容，同时打开控制台网络选项卡。将E4单元格的值从2500改为2000，此时会触发EditCell事件，发出交互命令：![](https://img2023.cnblogs.com/blog/139239/202302/139239-20230214171707564-1725613752.png)此时新建一个窗口，复制链接，查看文档内容已经变成2000了。如下动图所示：![](https://img2023.cnblogs.com/blog/139239/202302/139239-20230214171722569-698427034.gif)以上是Svelte框架结合SpreadJS实现表格协同文档的方法。如果您想体验更多功能或免费下载试用SpreadJS，欢迎来到葡萄城官网。

上一篇：SAP电商云SpartacusUI的代理门面是如何调用实际实现类的

下一篇：有奖调查-DeveloperNation2022年第一季度调查现已开放

Svelte框架结合SpreadJS实现表单协同文档相关文章