Svelte框架實(shí)現(xiàn)表格協(xié)同文檔的示例

更新時(shí)間：2023年01月18日 08:50:24 作者：葡萄城技術(shù)團(tuán)隊(duì)

本文主要介紹了Svelte框架實(shí)現(xiàn)表格協(xié)同文檔的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

首先，從框架搭建上,本篇示例采用當(dāng)下流行的前后端分離的開發(fā)方式，前端使用npm作為腳手架搭建Svelte框架。后端使用Java的SpringBoot作為后端框架。

首先，介紹下在前端Svelte框架下搭建在線表格編輯器。

1、在pageage.json文件中引入相關(guān)資源

   "@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框架中實(shí)現(xiàn)在線表格編輯器。
我們按照此思路新建一個(gè)SpreadSheet.svelte文件，寫入基礎(chǔ)在線表格編輯器。

<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、協(xié)同文檔可能不止一個(gè)，我們需要在頁(yè)面上創(chuàng)建一個(gè)文檔列表，來允許用戶選擇編輯哪個(gè)文檔，所以我們需要?jiǎng)?chuàng)建一個(gè)文檔列表頁(yè)面OnlineSheets.svelte。在此頁(yè)面中，我們要實(shí)現(xiàn)路由跳轉(zhuǎn)，和加載文檔數(shù)據(jù)。
這里我們用了svelte-spa-router進(jìn)行路由跳轉(zhuǎn) 與isomorphic-fetch進(jìn)行前后端數(shù)據(jù)傳輸。

<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>

以上代碼實(shí)現(xiàn)了文檔列表查看與文檔跳轉(zhuǎn)，使用 Open將跳轉(zhuǎn)至前面設(shè)計(jì)好的在線表格編輯器中。
至此，前端的相關(guān)內(nèi)容就準(zhǔn)備好了，接下來搭建下后端工作。
后端的準(zhǔn)備工作,首先安裝gradle作為包管理器。當(dāng)然，這里也可以用其他工具來代替，例如maven，或者源生引入jar包的方式將需要用到的jar包引入進(jìn)來。之后創(chuàng)建springboot工程配合搭建gradle引用GCExcel以及后面協(xié)同需要用到的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>

這樣子，我們做了框架的基本環(huán)境搭建，接下來我們介紹下如何搭建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;
    }

接下來我們?cè)L問下文檔列表頁(yè)，從文檔列表頁(yè)跳轉(zhuǎn)進(jìn)入文檔，進(jìn)行編輯。

接下來我們需要監(jiān)聽前端發(fā)出的操作。這里因?yàn)樵诰€表格編輯器本身將所有用戶可能做的操作全部做了封裝，所以省下了很多的功夫。

   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)
    });

根據(jù)cmd去判斷并且對(duì)命令再做一些簡(jiǎn)單封裝,之后將封裝過的命令發(fā)到服務(wù)端，之后通過websocket發(fā)同步指令：

  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))
        }
    }

當(dāng)協(xié)同端通過websocket接收到請(qǐng)求的時(shí)候，使用onmessage方法做同步命令。這里在協(xié)同端執(zhí)行command之前需要先撤銷之前的監(jiān)聽，避免再發(fā)送websocket導(dǎo)致死循環(huán)。在執(zhí)行之后，再次添加監(jiān)聽。

  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);
    }

至此，協(xié)同基礎(chǔ)內(nèi)容搭建結(jié)束，我們來看看編輯單元格內(nèi)容后，發(fā)生了什么吧。
如下圖所示，修改E4單元格內(nèi)容，同時(shí)打開控制臺(tái)網(wǎng)絡(luò)tab。
將E4單元格數(shù)值2500改為2000，此時(shí)觸發(fā)了EditCell事件，同時(shí)發(fā)出了交互指令：