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

收藏

本帖最后由 Fiooona 于 2020-3-8 23:48 编辑

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

进入后页面：

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

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

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

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

技术栈：

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

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

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

复制代码

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

复制代码

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

复制代码

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

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

复制代码

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

复制代码

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

复制代码

后台接口介绍：

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

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

获取Excel文件内容：getFile

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

保存文件：savefile

删除文件：deletefile

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

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

tony1109669192 · tony1109669192

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

		自动登录	找回密码
密码			立即注册

2 个回复