如何用Vue 集成 SpreadJS（Excel在线编辑操作）

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

1、1.环境介绍

1.后台：spring boot

2.前台：vue、vue-element、webpack、iview

3.插件：SpreadJS V12

2、 2.SpreadJS 插件下载

操作步骤如下图：填写完成后会收到官方发送的邮件。

3、下载后目录结构如下：

4、3.插件初始化

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

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

6、4.代码实现

思路如下：

4.1 定义div 承载 SpreadJS 的 Canvas 视图

<div ref="excelView" id="excelView" :style="spreadStyle"></div>

4.2 在 default 对象中初始化 Spread 和 excelIo 对象，并在 mounted 生命周期函数中初始化

7、4.3 定义文件上传组件，可采用 ivew 的上传组件或定义原生的 <input type="file"/>，本文采用的是原生的 html 文件上传。

（注：不要采用 Vue-element 的上传组件，因为获取到的文件对象类型不适配 SpreadJS 格式要求，请自行 console 打印查看效果）

8、4.4 构建 FormData 对象，将文件以及文件名称附加进去，并通过 axios 上传到后台指定方法中

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

整体前端代码如下：

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

sheet 和单元格的权限控制(与系统权限挂钩) spreadjs支持sheet的隐藏与展示功能，通过前台获取后台传递的权限表示，在spreadjs 对象初始化的时候进行 api调用控制。

多人同时编辑 首先，spreadjs是不提供此类功能，需要自己定制化开发，实现思路是 多人同时编辑时，根据spreadjs 提供的事件或脏数据功能与后台进行接口交互，然后通过websocket通信将数据同步到其他端。