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文件，写入基础在线表格编辑器。

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

    
        {#each docList as docItem}
            
        {/each}
        

        

        

            
Document
            

        
        
        

                
{docItem.index}
                
{docItem.fileName}
                

                     Open
                
            
    

以上代码实现了文档列表查看与文档跳转，使用React + Springboot + Quartz，从0实现Excel报表自动化

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

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