关于前端:Svelte框架结合SpreadJS实现表格协同文档

1次阅读

共计 7683 个字符，预计需要花费 20 分钟才能阅读完成。

SpreadJS 是葡萄城联合 40 余年业余控件技术和在电子表格应用领域的教训而推出的纯前端表格控件。作为一个类 Excel 控件，SpreadJS 如何实现以后比拟风行的表格协同呢？本篇文章将简略介绍一下。
首先，从框架搭建上, 本篇示例采纳当下风行的前后端拆散的开发方式，前端应用 npm 作为脚手架搭建 Svelte 框架。后端应用 Java 的 SpringBoot 作为后端框架。前端应用 SpreadJS V15.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-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 () => {
        // 初始化 Designer
        designer = new GCDesigner.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
        let spread = designer.getWorkbook();
        //fromJSON
        openDocument(docName);
        // 建设 webSocket
        connectDocument(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 事件，同时收回了交互指令：

![](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，欢送拜访葡萄城官网。
正文完
前端
发表至： 前端
2023-02-14
 0
关于前端:HelloProxy-前端代理工具
微信小程序图片展示
关于SegmentFault:Webpack5模块联邦源码探究
关于前端:利用WebAssembly实现js调用cc的函数

站内搜索

-「」