协同编辑插件 - 实时协作
重塑 Web 表格效率
原生级 Excel 实时协作：实时共编·权限管控·版本回溯·高度兼容
协同编辑插件 - 实时协作
协作时代的表格痛点
随着数字化转型加速，远程办公渗透率已超40%，跨地域、跨部门协作成为企业常态。表格作为数据协同的核心载体，广泛应用于预算编制、项目管理、检测填报、市场调研等场景，但传统协作模式已难以适配新需求。
从“单人编辑-邮件传输”到“多人并行协作”的转型中，企业普遍面临三大效率瓶颈：
版本混乱失控
多版本文件来回传输，易产生“最终版”“确认版”等冗余文件，信息不同步导致决策误判。
协作效率低下
单人轮流编辑，等待周期长，多人交叉填报场景下，流程推进效率降低 50% 以上。
权限管控薄弱
无法精细分配权限，敏感数据（如财务、检测数据）易泄露，合规性难保障。
协同编辑插件：解决方案
针对上述三大协作瓶颈，SpreadJS 协同编辑插件提供全方位解决方案，让表格协作从混乱低效走向有序高效
版本混乱？全链路版本管理来解决
告别“文件_v2_final”式的混乱命名，SpreadJS 协同插件提供自动化版本管理：
- 生成版本快照，记录编辑人、时间与修改内容
- 可视化版本对比，清晰展示差异变化
- 一键回溯历史版本，杜绝数据丢失风险
- 支持版本命名与备注，重要节点一目了然
效率低下？实时并行编辑来突破
打破单人编辑限制，实现多人实时协作，大幅提升团队效率：
- 支持团队多人同时编辑，操作实时同步无延迟
- 显示协作者光标与编辑状态，避免操作冲突
- 智能冲突解决，自动处理交叉编辑场景
- 编辑即时生效，无需手动刷新或文件上传
- 较传统模式提升协作效率60%以上，团队首选
权限薄弱？精细化权限体系来保障
从整体到单元格的多维权限控制，兼顾数据安全与协作自由：
- 支持单元格/行/列/工作表多级权限设置
- 灵活角色定义：查看者 vs 编辑者
- 动态权限调整，随需变更访问权限
- 敏感数据智能隐藏，未授权用户不可见
- 完整操作日志记录，变更轨迹一目了然
协同编辑插件：核心能力
从实时编辑到流程管控，全方位覆盖团队协作场景，提升表格协同效率。
实时协作编辑与冲突解决
- 支持多用户同时编辑同一工作簿，实现即时更新和双向数据交换
- 使用 OT 逻辑处理并发编辑，确保无冲突合并，例如当多个用户修改同一单元格时，系统会自动转换操作以保持数据一致性
- 检测本地工作簿变化，将其转换为操作（Ops）并分组为 ChangeSet，然后通过服务器广播同步到所有客户端
用户存在感知和 UI 增强
- 显示活动用户的光标和选择区域，提供协作意识的 UI 元素，帮助用户实时感知他人操作
- 支持自定义用户认证、访问控制和版本跟踪，适用于不同文档类型（如电子表格、富文本编辑器）
权限管理
- 配置查看模式（View Mode）和编辑模式（Edit Mode），查看模式限制为只读访问（允许本地 UI 交互如排序或调整大小），编辑模式支持完整同步编辑
协作编辑冲突状态处理
- 内置功能跟踪实时编辑状态，防止冲突（如行删除、列隐藏、排序导致的覆盖）
- 支持冲突操作处理，包括添加/删除行/列、隐藏行/列、排序和调整行高/列宽
- 视觉指示状态变化（如“Deleted”、“A1(Hidden)”或新单元格引用），并在编辑完成后决定是否写入值（例如，删除状态下不写入）
- 支持状态反转：对于非删除操作，如果引起变化的动作被撤销，状态会相应恢复；删除状态不自动反转，以确保内容一致性
ChangeSet 和批量操作
- ChangeSet 是相关 Ops 的集合，代表一个逻辑修改单元，支持原子性应用、冲突解决、历史跟踪和性能优化
- 默认单模式下，每个命令生成一个 ChangeSet；批量模式允许合并多个同步操作，减少服务器负载
- API 支持：applyChangeSet 应用 ChangeSet，onChangeSet 监听生成；startBatchOp 和 endBatchOp 用于批量分组
行业应用场景
| 行业 | 场景 | 价值 |
|---|---|---|
| 企业财务 | 集团公司预算编制、子公司财务报表汇总 | 财务、业务部门同时填报数据，自动汇总校验，审核流程线上化，预算编制周期从 15 天缩短至 5 天 |
| 项目管理 | 跨部门项目进度跟踪、资源分配统计 | 项目经理、开发、测试团队实时更新任务进度，通过 @提及同步风险问题，项目延期率降低 30% |
| 计量检测 | 检测机构原始数据填报、检定证书审核 | 检测员在线填报数据，审核员实时批注修改意见，证书模板协同设计，数据可追溯且符合行业合规要求 |
| 市场调研 | 多区域市场数据采集、用户调研分析 | 各区域团队同步填报调研数据，实时生成分析图表，避免数据二次录入，调研效率提升 50% |
| 教育科研 | 科研团队实验数据记录、论文数据统计 | 团队成员共享实验数据表格，实时补充数据、修改公式，研究成果迭代效率显著提升 |
协同插件对开发团队的价值
提升团队协作效率
支持分布式团队实时共同编辑表格（如项目计划、财务报表、数据汇总），消除版本混乱和沟通延迟，缩短任务完成周期。
适配企业级场景满足企业级应用的核心需求
- 多人评审场景： 可实时查看并追踪修改，通过光标和选区明确讨论焦点
- 审计与版本追溯：结合 ChangeSet 的历史记录，实现操作溯源和版本回滚，满足合规性要求
- 权限管控：基于角色的访问控制（如只读 / 编辑权限）确保敏感数据安全
降低开发复杂度
开发者无需从零构建协同逻辑，通过插件提供的 API（如applyChangeSet、onChangeSet）快速集成实时协作功能，专注于业务场景而非底层同步机制。
优化用户体验
冲突自动处理、编辑状态实时提示等功能，减少用户操作失误和认知负担，让协同编辑更流畅自然。
10 分钟搭建表格协同原型
查看产品文档，快速掌握协同编辑前后端搭建全过程
客户端：
import * as GC from '@grapecity-software/spread-sheets'
import '@grapecity-software/spread-sheets-collaboration-addon';
import { Client } from "@grapecity-software/js-collaboration-client";
import * as OT from "@grapecity-software/js-collaboration-ot-client";
import { type, bind } from '@grapecity-software/spread-sheets-collaboration-client';
import "@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
// 注册类型
OT.TypesManager.register(type);
window.onload = async function() {
const workbook = new GC.Spread.Sheets.Workbook('ss');
// 连接到服务器并加入房间
const conn = new Client().connect('room1');
const doc = new OT.SharedDoc(conn);
// 监听错误
doc.on('error', (err) => console.error(err));
await doc.fetch();
// 如果文档不存在，初始化内容
if (!doc.type) {
workbook.getActiveSheet().getCell(0, 0).value("默认内容");
await doc.create(workbook.collaboration.toSnapshot(), type.uri, {});
bind(workbook, doc);
} else {
bind(workbook, doc);
}
}
服务端：
import express from 'express';
import http from 'http';
import { Server } from '@grapecity-software/js-collaboration';
import * as OT from '@grapecity-software/js-collaboration-ot';
import { type } from '@grapecity-software/spread-sheets-collaboration';
// 注册类型
OT.TypesManager.register(type);
const app = express();
const httpServer = http.createServer(app);
const server = new Server({ httpServer });
const port = 8080;
// 初始化 OT 文档服务
const documentServices = new OT.DocumentServices();
server.useFeature(OT.documentFeature(documentServices));
// 初始化 OT 文档服务
app.use(express.static('public'));
// 启动服务器
httpServer.listen(port, () => {
console.log(`服务器正在监听端口 ${port}`);
console.log(`http://127.0.0.1:${port}/index.html`);
});
