本文使用SpreadJS表格控件，实现了在线读取、编辑Excel 文档的功能，下载附件的示例代码，按照Readme文档中的步骤可运行前后端代码。
SpreadJS 是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，具有 “高性能、跨平台、与 Excel 高度兼容”的产品特性。在带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景，极大降低了企业研发成本和项目交付风险。
SpreadJS正式版
本文使用SpreadJS表格控件，实现了在线读取、编辑Excel 文档的功能，下载附件的示例代码，按照Readme文档中的步骤可运行前后端代码。
进入后页面：
单击文件，右侧会显示文件信息：
双击文件夹会进入文件夹：
双击文件会进入编辑文件的弹框：
可以对文件进行修改、删除操作：
技术栈：
后端主要采用了：SpringBoot
前端主要采用了：Vue ElementUI Typescript
快速运行项目: 下载附件代码，前后台详细运行步骤在Readme中有介绍，此处不再赘述。
接下来介绍实现该功能的关键步骤：
相关依赖包都写在package.json里，执行命令 npm install 即可安装，主要有：
在 SpreadJS.vue文件中引入 SpreadJS 相关安装包：
在App.vue文件中引入 SpreadJS 样式文件、中文资源文件：
List.vue文件中是主要的页面逻辑，双击文件时弹出弹框，弹框中引入了自定义的组件：
mySpread变量中是从后台返回的文件流，传给MySpreadJS 组件，子组件接收到数据后，调用excelIO.open方法打开Excel 文件流，
可以在线编辑Excel文件，并保存，excelIO.save方法可以将修改后的文件流传给后台，实现文件的修改功能
后台接口介绍：
获取某路径下的文件集合：getfolder
| 参数 | 是否必须 | 说明 |
| path | 是 | 文件夹路径 |
获取Excel文件内容：getFile
| 参数 | 是否必须 | 说明 |
| filePath | 是 | 文件路径 |
保存文件：savefile
| 参数 | 是否必须 | 说明 |
| filePath | 是 | 文件路径 |
| type | 是 | create 创建文件，update 更新文件 |
| excelFile | 是 | Excel文件流 |
删除文件：deletefile
| 参数 | 是否必须 | 说明 |
| filePath | 是 | 文件路径 |
本文内容到这里就结束了，希望对您有所帮助~您可以下载SpreadJS试用版免费体验~或者点击下方链接下载示例代码！
相关内容：
使用SpreadJS实现在线 Excel 文档 Demo（示例代码）
盘点 SpreadJS 2020最新实用资源，助力快速上手纯前端表格控件！
想要购买SpreadJS正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！