Vue集成SpreadJs（Excel在线编辑操作）

场景：最近公司开了个新项目，需要在线做财务损益报表，经调研需要支持如下功能：

• Excel报表的导入导出
• 报表的数据存档
• 在线编辑公式
• sheet 和单元格的权限控制(与系统权限挂钩)
• 多人同时编辑
  经过技术选型，目前定位了通过SpreadJs 实现。并与SpreadJs工程师进行了多轮电话沟通（再次感谢Spread工程师的细心回答）。
  注：在今年8月份，spreadJs最新版已经提供了vue组件的支持，可自行选择官方demo，本文中实现的是采用非vue组件集成的方式。

本文初步实现1、2、3的需求，并在文章最后附注4、5的实现思路希望能帮到你们

实现后效果如下：

图片.png

实现步骤如下：

1.环境介绍

1.后台：spring boot
2.前台：vue、vue-element、webpack、iview
3.插件：SpreadJs V12

2.SpreadJs插件下载
下载地址：https://www.grapecity.com.cn/download/?pid=57
操作步骤如下图：填写完成后会收到官方发送的邮件

图片.png

下载后目录结构如下：

图片.png

3.插件初始化

• 首先将下载后的文件中的css和js提取出来放到前端项目的static目录下面，如下图：

  
  
  图片.png

• 其次在项目根路径index.html中全局引入Spread插件的JS和CSS，如下图红色标记的内容

  
  
  图片.png

4.代码实现
思路如下：
4.1定义div 承载spreadjs的 canvas 视图

4.2在default对象中初始化spread和excelIo对象，并在mounted生命周期函数中初始化，代码结构见图片1：

图片1.png

4.3 定义文件上传组件，可采用ivew的上传组件或定义原生的 ，本文采用的是原生的html文件上传
注：不要采用vue-element的上传组件，因为获取到的文件对象类型不适配spreadjs 格式要求，请自行console打印查看效果
4.4 构建FormData对象，将文件以及文件名称附加进去，并通过axios上传到后台指定方法中，代码见图二：

图二.png

4.5 编写后台代码接收前台传递的文件，并存档到文件服务器且在关系型数据库中添加标记，记录文件在服务器的路径

整体前端代码如下：

---

最后为以下两个需求提供下解决思路：

• sheet 和单元格的权限控制(与系统权限挂钩)
  spreadjs支持sheet的隐藏与展示功能，通过前台获取后台传递的权限表示，在spreadjs 对象初始化的时候进行 api调用控制。
• 多人同时编辑
  首先，spreadjs是不提供此类功能，需要自己定制化开发，实现思路是
  多人同时编辑时，根据spreadjs 提供的事件或脏数据功能与后台进行接口交互，然后通过websocket通信将数据同步到其他端。