Vue+SpringBoot+SpreadJS 实现的在线文档功能.pdfVIP

Vue+SpringBoot+SpreadJS实现的在线文档

在线文档，顾名思义就是通过在线的方式对文档进行操作，实现如数据填报、数据计算、可视

化、在线导入导出Excel文件、自定义系统外观、工具栏、在网页内满足单人或多人编辑并将

文件上传至服务端保存的功能。

国内外常见的在线文档，包括：微软OfficeOnline、Google文档、石墨文档、腾讯文档、

飞书、语雀等。点击此处，了解这些软件产品的功能对比

通过对比这些软件产品，可以将它们的主要功能点，概括为三个层面：数据填报、协同编辑和

类Excel的呈现方式。

•数据填报：支持在线导入导出Excel、大数据量填报、填报暂存、多sheet填报、多

级上报

•协同编辑：支持多人协作、实时编辑、数据同步、多级上报、历史查询

•类Excel的呈现方式：提供类Excel的操作模式和使用体验，兼容Excel数据结构

可以说，只要满足了上述需求，就可以开发出一款优秀的在线文档。

而SpreadJS纯前端表格控件，恰好满足。

下面，我们就通过代码，演示如何借助SpreadJS搭建一款简单的在线文档系统。

在线文档系统截图

该系统集成了SpreadJS表格控件，目前已经实现了在线读取、编辑Excel文档的功能，文末

提供了示例代码下载，大家可以按照Readme文档中的步骤运行。

PS：欢迎大家前往SpreadJS产品官网，了解并学习这款纯前端表格组件，以实现更多在线文

档的功能。

如下是系统运行截图。

进入页面（FileList的展示文件均为服务器上的文件）：

单击Excel文件，右侧会显示该文件的详细信息：

双击文件夹：

点击某个Excel文件，打开编辑文件的弹框：

在线对Excel文件进行修改、删除：

技术栈

•后端：SpringBoot

•前端：SpreadJS、Vue、ElementUI、Typescript

关键步骤

实现该系统的相关依赖包都写在package.json里，执行命令npminstall即可安装，主要

有：

在SpreadJS.vue文件中引入SpreadJS相关安装包：

在App.vue文件中引入SpreadJS的样式文件、中文资源文件：

import@grapecity/spread-sheets-resources-zh

import@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css

List.vue文件中是主要的页面逻辑，双击文件时弹出弹框，弹框中引入了自定义的组件：

mySpread变量中是从后台返回的文件流，传给MySpreadJS组件，子组件接收到数据后，

调用excelIO.open方法打开Excel文件流，

spreadInitHandle:function(spread){

this.spread=spread;

letself=this;

letexcelIO=newExcelIO.IO();

excelIO.open(

this.spreadblobasBlob,

function(json){

letworkbookObj=json;

self.spread.fromJSON(workbookObj);

},

function(e){

alert(e.errorMessage);});},

在线编辑Excel文件，并保存。借助excelIO.save