Svelte框架实现表格协同文档

首先，从框架搭建上,本篇示例采用当下流行的前后端分离的开发方式，前端使用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文件，写入基础在线表格编辑器。

<script>
import {onMount} from 'svelte';
import '@grapecity/spread-sheets-print';
import "@grapecity/spread-sheets-charts";
import '@grapecity/spread-sheets-shapes';
import '@grapecity/spread-sheets-pivot-addon';
import '@grapecity/spread-sheets-tablesheet';
import '@grapecity/spread-sheets-designer-resources-cn';
import '@grapecity/spread-sheets-designer';
import * as GC from '@grapecity/spread-sheets';
import * as GCDesigner from '@grapecity/spread-sheets-designer';let designer = null;
onMount(async () => {
designer = new GCDesigner.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
let spread = designer.getWorkbook();
});</script>
<div id="designerHost" class="designer-host"></div><style scoped>
@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;
}</style>

3、协同文档可能不止一个，我们需要在页面上创建一个文档列表，来允许用户选择编辑哪个文档，所以我们需要创建一个文档列表页面OnlineSheets.svelte。在此页面中，我们要实现路由跳转，和加载文档数据。
这里我们用了svelte-spa-router进行路由跳转与isomorphic-fetch进行前后端数据传输。

<script>import {onMount} from 'svelte';import { link } from "svelte-spa-router";import {Utility} from "../utility.js";let docList = [];onMount(async () => {Utility.getDocList().then(result => {docList  = result.map((item,index)=>{return {path:'/Spreadsheet/' + item.substring(0, item.lastIndexOf('.')),index,fileName:item}})});});
</script>
<main class="main"><table className='table' aria-labelledby="tabelLabel"><thead><tr><th>Document</th><th></th></tr></thead><tbody>{#each docList as docItem}<tr><td>{docItem.index}</td><td>{docItem.fileName}</td><td className='row'><a use:link={docItem.path}> Open</a></td></tr>{/each}</tbody></table>
</main>

以上代码实现了文档列表查看与文档跳转，使用 Open将跳转至前面设计好的在线表格编辑器中。
至此，前端的相关内容就准备好了，接下来搭建下后端工作。
后端的准备工作,首先安装gradle作为包管理器。当然，这里也可以用其他工具来代替，例如maven，或者源生引入jar包的方式将需要用到的jar包引入进来。之后创建springboot工程配合搭建gradle引用GCExcel以及后面协同需要用到的websocket。

<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency><dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency><dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<version>2.4.3</version>
</dependency><dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
<version>2.4.3</version>
</dependency><dependency>
<groupId>com.grapecity.documents</groupId>
<artifactId>gcexcel</artifactId>
<version>4.0.3</version>
</dependency><dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.6</version>
</dependency><dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency><dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<version>10.0.2</version>
</dependency><dependency>
<groupId>com.jayway.jsonpath</groupId>
<artifactId>json-path</artifactId>
<version>2.5.0</version>
</dependency>
</dependencies>

这样子，我们做了框架的基本环境搭建，接下来我们介绍下如何搭建webSocket。
在SpreadSheet.svelte文件中写入如下代码建立webSocket链接：

    function connectDocument(docName) {if (webSocket != null) {return;}var ws = new WebSocket(Utility.webSocketUrl);  //'ws://localhost:8090/spreadjs'ws.onopen = function () {var data = {cmd: "connect",docID: docName}ws.send(JSON.stringify(data));}ws.onmessage = onmessage;webSocket = ws;}

接下来我们访问下文档列表页，从文档列表页跳转进入文档，进行编辑。

接下来我们需要监听前端发出的操作。这里因为在线表格编辑器本身将所有用户可能做的操作全部做了封装，所以省下了很多的功夫。

   onMount(async () => {//初始化Designerdesigner = new GCDesigner.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));let spread = designer.getWorkbook();//fromJSONopenDocument(docName);//建立webSocketconnectDocument(docName);var cm = spread.commandManager();cm.addListener('myListener', onCommandExecute)});

根据cmd去判断并且对命令再做一些简单封装,之后将封装过的命令发到服务端，之后通过websocket发同步指令：

  function onCommandExecute(args) {console.log(args.command);var command = args.command;var ServerCommand = null;switch (command.cmd) {case Utility.ServerCommands.EditCell:ServerCommand = {sheetName: command.sheetName,row: command.row,column: command.col,newValue: command.newValue}break;case Utility.ServerCommands.ResizeRow:ServerCommand = {sheetName: command.sheetName,rows: command.rows,size: command.size};break;case Utility.ServerCommands.ResizeColumn:ServerCommand = {sheetName: command.sheetName,columns: command.columns,size: command.size};break;case 'Designer.' + Utility.ServerCommands.SetFontFamily:case 'Designer.' + Utility.ServerCommands.SetFontSize:case 'Designer.' + Utility.ServerCommands.SetBackColor:case 'Designer.' + Utility.ServerCommands.SetForeColor:case 'Designer.' + Utility.ServerCommands.SetFontWeight:case 'Designer.' + Utility.ServerCommands.SetFontStyle:case 'Designer.' + Utility.ServerCommands.SetUnderline:case 'Designer.' + Utility.ServerCommands.SetDoubleUnderline:if (command.value && command.value.indexOf('undefined') === -1) {ServerCommand = {sheetName: command.sheetName,selections: command.selections,value: command.value}}break;case Utility.ServerCommands.MoveFloatingObjects:ServerCommand = {sheetName: command.sheetName,floatingObjects: command.floatingObjects,offsetX: command.offsetX,offsetY: command.offsetY};break;case Utility.ServerCommands.ResizeFloatingObjects:ServerCommand = {sheetName: command.sheetName,floatingObjects: command.floatingObjects,offsetX: command.offsetX,offsetY: command.offsetY,offsetWidth: command.offsetWidth,offsetHeight: command.offsetHeight};break;case Utility.ServerCommands.InsertColumns:case Utility.ServerCommands.InsertRows:ServerCommand = {sheetName: command.sheetName,selections: command.selections};break;default:}if (ServerCommand != null) {var cmd = command.cmd;var dotIndex = cmd.lastIndexOf('.');if (dotIndex !== -1) {cmd = cmd.substring(dotIndex + 1);}ServerCommand.cmd = cmd;ServerCommand.docID = params.fileName;Utility.ExecuteCommandAtServer(ServerCommand);command.docID = ServerCommand.docID;webSocket.send(JSON.stringify(command))}}

当协同端通过websocket接收到请求的时候，使用onmessage方法做同步命令。这里在协同端执行command之前需要先撤销之前的监听，避免再发送websocket导致死循环。在执行之后，再次添加监听。

  function onmessage(message) {var command = JSON.parse(message.data);command._styles = null;let spread = designer.getWorkbook()var cm = spread.commandManager();cm.removeListener('myListener');spread.commandManager().execute(command);cm.addListener('myListener', onCommandExecute);}

至此，协同基础内容搭建结束，我们来看看编辑单元格内容后，发生了什么吧。
如下图所示，修改E4单元格内容，同时打开控制台网络tab。
将E4单元格数值2500改为2000，此时触发了EditCell事件，同时发出了交互指令：

此时新建一个窗口，复制链接，查看文档内容已经变为了2000。
如下动图所示：

拓展阅读

React + Springboot + Quartz，从0实现Excel报表自动化

电子表格也能做购物车？简单三步就能实现

使用纯前端类Excel表格控件SpreadJS构建企业现金流量表

Svelte框架实现表格协同文档相关推荐

表格控件对比_小白如何开发出苏宁易购同款表格协同文档系统？
SpreadJS是一款基于 HTML5 的纯前端电子表格控件,兼容 450 种以上的 Excel 公式,具有 "高性能.跨平台.与 Excel 高度兼容"的产品特性,满足 Web ...
Web3.0：Skiff 去中心化隐私协同文档
随着国家反垄断和数据隐私保护的强监管落地,原本过得风生水起的web2.0大平台型企业都受到了重大的冲击.在平台模式中往往用户和平台是一种零和游戏,例如平台无底线的数据采集.大数据杀熟.高额抽成等等. ...
再谈OT算法的协同文档制作的底层基础架构记录
关于OT算法的协同的核心算法部分已经写完了. 再简单谈一下关于协同文档底层架构的问题,因为目前我的方案还没有最终落地所以并不清楚实际情况中会出现哪些问题, 说一下传输层,传输层是用的MQTT,得益于R ...
协同文档如何添加水印
在线协同"文档"添加水印功能是新增功能,如需使用此功能,需要DSM 7.1.1-42900及以上版本.Synology Office 版本需要3.5.2-19104版本.检查方法如 ...
怎么把cad做的图分享给别人_在线协同文档分享后，别人只能看却不能写怎么办？...
在这个远程办公方式盛行的时代,越来越多的办公软件开始蜂拥而至,而小编最近发现一款简单而又好用的协作办公软件--石墨文档,这款软件支持多人协作,对云端的文档或表格进行有效的编辑,同时还支持多人同时编辑同 ...
requestPermissions读写手机存储权限_泛圈云盘可为企业建立高效安全的云办公在线协同文档存储？...
泛圈企业云盘结合智能手机和无线网络,实现对任何办公地点和办公时间的无缝访问,提高办公效率.它可以连接客户原有的各种IT系统,包括OA.邮件.ERP等各种个人业务系统,使手机也可以用来操作.浏览.管理公 ...
atitit。获取表格的字段注释metadata的原理以及AND 字段表格描述文档方案
atitit.获取表格的字段注释metadata的原理以及AND 字段表格描述文档方案 1. 通过sql ide navicate获取(推荐)通过meatadata数据库获取 1 2. 通过代码获取 ...
wps多人协作后怎么保存_在线协同文档分享后，别人只能看却不能写怎么办？
在这个远程办公方式盛行的时代,越来越多的办公软件开始蜂拥而至,而小编最近发现一款简单而又好用的协作办公软件--石墨文档,这款软件支持多人协作,对云端的文档或表格进行有效的编辑,同时还支持多人同时编辑同 ...
web_socket 协同文档编辑
源码地址:http://files.cnblogs.com/files/fxnet/web_socket协同文档编辑.zip 服务端用nodejs ,主要原理是后端生成一个版本号为了防止请求顺序错乱 ...

Svelte框架实现表格协同文档

拓展阅读

Svelte框架实现表格协同文档相关推荐

最新文章

热门文章