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

在线文档，顾名思义就是以在线的方式对文档进行操作，如数据填写、数据计算、可视化、在线导入导出Excel文件、自定义系统外观、工具栏、网页中可满足一人或多人编辑、上传文件至服务器存储等功能。国内外常见的在线文档，包括：MicrosoftOfficeOnline、GoogleDocs、ShimoDocs、TencentDocs、飞书、语雀等。点此了解这些软件产品的功能对比。通过比较这些软件产品，它们的主要功能可以归纳为三个层次：数据填写、协同编辑和类Excel展示。数据填报：支持Excel在线导入导出、大数据量填报、填报暂存、多张填报、多级报表协同编辑：支持多人协作、实时编辑、数据同步、多级报表、历史查询类Excel展现方式：提供类Excel操作方式和用户体验，兼容Excel数据结构。可以说，只要满足以上要求，就可以开发出一个优秀的在线文档。而SpreadJS纯前端表单控件恰到好处。接下来，我们将通过代码演示如何借助SpreadJS构建一个简单的在线文档系统。在线文档系统截图系统集成了SpreadJS表格控件，实现了在线阅读和编辑Excel文档的功能。文末提供示例代码下载，您可以按照Readme文档中的步骤运行。PS：欢迎来到SpreadJS产品官网了解和学习这款纯前端表格组件，实现在线文档的更多功能。下面是系统运行截图。进入页面（文件列表中显示的文件均为服务器上的文件）：点击Excel文件，右侧会显示该文件的详细信息：双击文件夹：点击一个Excel文件打开文件编辑弹出框：在线配对修改删除Excel文件：技术栈后端：SpringBoot前端：SpreadJS、Vue、ElementUI、Typescript实现系统相关依赖包的关键步骤都写在package.json，执行npminstall即可安装命令，主要有："@grapecity/spread-sheets":"^13.0.5","@grapecity/spread-sheets-resources-zh":"^13.0.5","@grapecity/spread-sheets-vue":"^13.0.5","@grapecity/spread-sheets-pdf":"^13.0.5","@grapecity/spread-sheets-print":"^13.0.5","@grapecity/spread-sheets-charts":"^13.0.5","@grapecity/spread-sheets-shapes":"^13.0.5",引入SpreadJS相关安装包在SpreadJS.vue文件：导入“@grapecity/spread-床单视图“；从“@grapecity/spread-sheets”导入*作为GC；导入“@grapecity/spread-sheets-charts”；导入“@grapecity/spread-sheets-shapes”；在App.vue文件Files，中文资源文件中引入SpreadJS样式：import'@grapecity/spread-sheets-resources-zh'import'@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'列表。vue文件是主页面逻辑，双击该文件会弹出一个弹框，在弹框里引入一个自定义组件：mySpread变量是后台返回的文件流，传递给MySpreadJS组件。子组件接收到数据后，调用excelIO.open方法打开Excel文件流，spreadInitHandle:function(spread){this.spread=spread;让自己=这个；让excelIO=newExcelIO.IO();excelIO.open(this.spreadblobasBlob,function(json){letworkbookObj=json;self.spread.fromJSON(workbookObj);},function(e){alert(e.errorMessage);});},编辑在线Excel文件并保存借助excelIO.save方法，可以将修改后的文件传到后台，实现文件修改功能：excelIO.save(curjson,function(fileblob){letformData=newFormData();formData.append("filePath",self.filePath);formData.append("type","update");formData.append("excelFile",fileblob);httpUtils.post("/filemanager/savefile",formData).then(response=>{self.$message({type:"success",message:"保存成功！"});self.$emit("done");});},function(e){//处理错误控制台。记录(e);});后台界面介绍获取某个路径下的文件集合：getfolder获取Excel文件的内容：getFile保存文件：savefile删除文件：deletefile以上是Vue+SpringBoot+SpreadJS实现的一个简单的在线文档，如果你想要了解详细的实现步骤，请下载示例代码。除了示例中在线阅读和编辑Excel文档的功能外，SpreadJS还提供了WebExcel组件开发、数据填写、Excel报表设计等功能。此外，您还可以通过调用API进一步扩展SpreadJS，满足协同编辑、多级报表、报表暂存等更多场景的业务需求。欢迎到SpreadJS产品官网下载试用。