使用SpreadJS实现在线 Excel 文档 Demo (Vue+SpringBoot)

该示例使用SpreadJS表格控件，实现了在线读取、编辑Excel 文档的功能，下载附件的示例代码，按照Readme文档中的步骤可运行前后端代码。

进入后页面：

单击文件，右侧会显示文件信息：

双击文件夹会进入文件夹：

双击文件会进入编辑文件的弹框：

可以对文件进行修改、删除操作：

技术栈：

后端主要采用了：SpringBoot 前端主要采用了：Vue  ElementUI Typescript
快速运行项目: 下载附件代码，前后台详细运行步骤在Readme中有介绍，此处不再赘述。

接下来介绍实现该功能的关键步骤：

相关依赖包都写在package.json里，执行命令 npm install 即可安装，主要有：

1. "@grapecity/spread-sheets": "^13.0.5",
   
2.         "@grapecity/spread-sheets-resources-zh": "^13.0.5",
   
3.         "@grapecity/spread-sheets-vue": "^13.0.5",
   
4.         "@grapecity/spread-sheets-pdf": "^13.0.5",
   
5.         "@grapecity/spread-sheets-print": "^13.0.5",
   
6.         "@grapecity/spread-sheets-charts": "^13.0.5",
   
7.         "@grapecity/spread-sheets-shapes": "^13.0.5",

复制代码

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

1. import "@grapecity/spread-sheets-vue";
   
2. import * as GC from "@grapecity/spread-sheets";
   
3. import  "@grapecity/spread-sheets-charts";
   
4. import  "@grapecity/spread-sheets-shapes";

复制代码

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

1. import '@grapecity/spread-sheets-resources-zh'
   
2.   import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'

复制代码

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

1.    <MySpreadJS :mySpread="mySpread" :filePath="filePath" @done="childDone" :closeSpread='closeSpread'></MySpreadJS>
   
2.          

复制代码

mySpread变量中是从后台返回的文件流，传给MySpreadJS 组件，子组件接收到数据后，调用excelIO.open方法打开Excel 文件流，

1. spreadInitHandle: function(spread) {
   
2.       this.spread = spread;
   
3.       let self = this;
   
4.       let excelIO = new ExcelIO.IO();
   
5.       excelIO.open(
   
6.         this.spreadblob as Blob,
   
7.         function(json) {
   
8.           let workbookObj = json;
   
9.           self.spread.fromJSON(workbookObj);
   
10.         },
    
11.         function(e) {
    
12.           alert(e.errorMessage);});},

复制代码

可以在线编辑Excel文件，并保存，excelIO.save方法可以将修改后的文件流传给后台，实现文件的修改功能

1.   excelIO.save(
   
2.         curjson,
   
3.         function(fileblob) {
   
4.           let formData = new FormData();
   
5.           formData.append("filePath", self.filePath);
   
6.           formData.append("type", "update");
   
7.           formData.append("excelFile", fileblob);
   
8.           httpUtils.post("/filemanager/savefile", formData).then(response => {
   
9.             self.$message({
   
10.               type: "success",
    
11.               message: "保存成功!"
    
12.             });
    
13.             self.$emit("done");
    
14.           });},
    
15.         function(e) {
    
16.           //process error
    
17.           console.log(e);});

复制代码

后台接口介绍：

获取某路径下的文件集合：getfolder

参数	是否必须	说明
path	是	文件夹路径

获取Excel文件内容：getFile

参数	是否必须	说明
filePath	是	文件路径

保存文件：savefile

参数	是否必须	说明
filePath	是	文件路径
type	是	create 创建文件，update 更新文件
excelFile	是	Excel文件流

删除文件：deletefile

参数	是否必须	说明
filePath	是	文件路径

更多详细的实现内容可以下载附件代码，有任何疑问也可以在此帖下回帖。

服务器保存文件的功能，这个没问题，问题在于我在这个excel里插入一个table，保存之后，用office excel软件打开就弹出错误。之前好像视频课程讲到的，是因为没有把table去掉的原因