在线协作表格
是这样的，上周四晚上准备下班，领导给我发了一个在线协作表格的链接，我就去看了看，发现这个表格是可以在线协作的，也就是同时多人去操作这个表格。
周五就让后端同事协助我准备一个 demo，因为是第三方产品，需要后端提供接口，因为那天事情比较多，下午才忙完。
领导看了之后，觉的还可以，所以这周就在搞这个在线表格的功能，后端同事跟着产品经理出差去了，协作沟通不太方便。
场景： 公司是有个测量数据，之前都是将原来的 excel 进行下载，修改完成之后在重新上传，这样消耗的时间成本是比较高的。现在是在线编辑完成之后保存，点击按钮直接上传。
技术实现
具体的文档：WPS webOffice
因为我看涉及到了服务端，我打算一个人独自开发用 node 去实现，看了文档之后才发现没有 node 对应的 SDK，有 java 和 go 的 SDK。
所以只能让后端同事协助搞一下。
文档很简单，就是引入对应的依赖或者 cdn 链接，初始化
const wpsInstance = ref();
wpsInstance.value = WebOfficeSDK.init({
// 文芳类型是 表格
officeType: WebOfficeSDK.OfficeType.Spreadsheet,
// 申请的应用ID
appId: "",
// 文档ID，这里可以让后端给
fileId: "",
// 用户token, 可以为系统的token, 右上角展示对应的头像
token: "",
// 渲染的容器，默认是body
mount: "#excel-container",
// 禁用，隐藏右下角帮助按钮
commandBars: [
{
cmbId: "FloatQuickHelp",
attributes: {
visible: false,
enable: false,
},
},
],
});这样初始化算是完成了, 完成之后，怎样去检测文件是否正常打开？
wpsInstance.value.ApiEvent.AddApiEventListener("fileOpen", data => {
// 状态成功，表示文件打开成功
if (data.data) {
// ...
}
});
// 当进行文档编辑，保存是，该方法会监听的到文件的状态变化
wpsInstance.value.ApiEvent.AddApiEventListener("fileStatus", data => {
console.log("监听文件的状态：", data);
});上面的俩个方法必须写在ready之前，ready代码如下：
// ... 监听操作
await wpsInstance.value.ready();到这里为止，文件预览和编辑基本就结束了，当然如果提示报错的话，需要后端协助开发对应的接口，等待接口实现之后才能正常编辑预览。
当然还有保存操作，除了正常ctrl + s可以进行保存，为了扩展功能，单独加了一个保存的按钮，按钮点击代码如下：
const result = await wpsInstance.value.save();
// 具体对应的状态可以看下文档 https://solution.wps.cn/docs/web/instance.html#save