Svelte框架实现表格协作文档

时间：2023-03-28 19:14:29 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;}首先，从框架搭建的角度，本例采用了当前流行的前后端分离的开发方式，前端使用npm作为脚手架搭建Svelte框架。后端使用Java的SpringBoot作为后端框架。首先介绍如何在前端Svelte框架下搭建在线表格编辑器。1、在pageage.json文件中引入相关资源"@grapecity/spread-excelio":"15.2.5","@grapecity/spread-sheets":"15.2.5","@grapecity/spread-sheets-barcode":"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:ca使用“设计师”。+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,偏移量X: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事件被触发，同时发出一条交互命令：此时新建一个窗口，复制链接，查看内容文档变成了2000，如下动画所示：延伸阅读React+Springboot+Quartz，从0实现Excel报表自动化电子表格也能当购物车？使用纯前端Excel表格控件SpreadJS简单三步即可构建企业现金流量表

上一篇：烦这个，关于js关键字的7道面试题

下一篇：使用SimpleForm控件ResponsiveGridLayout深入解析SAPUI5工作原理

Svelte框架实现表格协作文档相关文章