Univer开源Web表格SDK深入解析:架构原理与实战集成
1. 先搞清楚 Univer 是什么
最近好几个做前端的同事不约而同地问到一个开源项目:Univer。有人问它和 Luckysheet 是什么关系,有人问能不能替换掉自研的在线表格,还有人直接甩来一句“Univer 在线体验了一下,没想到拖动、滚动这么流畅”。作为一个在表格方向折腾过组件库、自研过编辑器、也评估过商业组件的开发者,我一开始也以为这只是又一次轮子发布,但花了一周时间看架构、跑 Demo、接业务数据之后,我的结论很明确:如果要在 Web 应用里嵌入在线表格或在线文档能力,Univer 非常值得认真评估。
它到底能做什么?我用一句话概括:Univer 是一套开源、免费、可扩展的 Web 办公文档 SDK,目前覆盖电子表格、文档、幻灯片三类编辑场景,其中电子表格的成熟度最高。它不是一个开箱即用的完整 Office 网站,而是提供编辑器内核、UI 外壳、公式引擎和一堆可选插件,让你在自己的产品里快速拥有一个能看、能编辑、甚至能导入导出 Excel 的表格模块。适合谁来用?第一类是前端团队,想给 B 端系统加在线表格却不想从零自研;第二类是产品和技术负责人,正在评估用开源组件替代昂贵的商业授权;第三类是本身就在做数据工具、低代码平台,想基于一个稳定内核二次开发的团队。下面我尽量把 Univer 是什么、为什么值得用、怎么跑起来这些事讲透。
1.1 一句话定位:开源、可嵌入、面向 Web 的办公文档 SDK
很多人在第一次看到 Univer 时,会下意识把它和腾讯文档、Google Sheets 这种成品软件做对比,这是一个误解。Univer 不是一个独立运行的办公套件网站,它更像一个“零件库”。你去装修一个房间,不需要自己烧砖烧水泥,Univer 提供的是预制好的承重墙、门窗和管线,但最终房间布局、风格、和谁联通,还是由你决定。
这种定位带来的直接好处是集成自由。你可以把一个 Univer 表格放在后台管理系统的某个 Tab 页里,也可以把它嵌入到复杂的业务表单中,甚至只取它的公式计算能力,完全自己画界面。从技术实现上讲,Univer 核心用 TypeScript 编写,对外暴露的是一个个插件化的包。开发者通过注册插件的方式,按需组合出编辑器能力,而不是被迫接收一个庞大的全家桶。
这里有必要强调一下“SDK”和“组件”的差别。简单说,组件是搭好的积木块,你能在有限范围内调整;SDK 则是一套可以深挖的开发框架,你可以改渲染、换 UI、接自定义数据源。Univer 更偏后者。这种灵活性的代价是学习曲线略陡:你不能像引入一个普通表格组件那样,传个配置就完事,至少要理解“实例、插件、命令”这几个核心概念。
1.2 项目背景与现状:活跃迭代中的开源项目
Univer 的项目活跃度在同类开源产品里相当能打。它的 GitHub 仓库提交频繁,Issue 响应速度也比较快,官方提供了在线 Demo 和文档,很多人第一次接触“Univer 在线”就是从这个 Demo 开始的。我在实际体验时最大的感受是:这已经不是“演示级”的玩具,而是真正能投入业务使用的编辑器内核。
如果你之前关注过 Luckysheet,对 Univer 应该有一种熟悉感。Univer 和 Luckysheet 有很深的渊源,团队在 Luckysheet 上积累了大量表格交互经验之后,没有选择继续缝缝补补,而是用更现代的架构重写了一套新内核,这也就是 Univer。所以很多从 Luckysheet 过来的老人,会觉得 Univer 的交互很亲切,但一旦深挖 API,又会发现它几乎是全新的东西。
关于版本我要多说一句:Univer 当前的主流版本是 2.x,包结构做了大量拆分,网上那些介绍 1.x 或者早期 alpha 版本的旧博客,很多 API 已经对不上了。如果你照着文章抄代码,抄之前先看一眼安装出来的版本号。这也是开源项目太活跃的“甜蜜烦恼”:文档和社区内容经常赶不上代码变化,遇到问题最靠谱的其实是官方仓库里的实例代码和类型定义。
1.3 它到底解决了什么问题
自己做在线表格有多痛,没做过的人可能体会不到。很多团队最初以为“表格不就是 HTML table 吗”,结果真正要做编辑、复制粘贴、公式、撤销重做的时候,才发现每一步都是坑。给每个单元格绑事件,数据量一上来就卡;想实现区域选择和合并单元格,DOM 结构绕来绕去;做到公式联动,本质上已经是在写一门解释器了;再加上多人协同、导入导出,随便拉出哪一项,都够一个小团队干半年。
Univer 的价值,就是把这些表格场景里的“公共难题”先解决掉,让业务团队集中精力做自己的功能。它内置的渲染层能撑住大数据量,命令系统让撤销重做和协同变得可行,公式引擎处理单元格依赖关系,插件机制又把导入导出这些能力做成可插拔部件。换句话说,你不需要从第一行代码开始研究“怎么做一个网页版 Excel”,而是可以站在一个已经跑了很远的开源项目上,快速搭建属于自己的产品。
当然,引入开源 SDK 也不是零成本。你仍然需要花时间熟悉它的编程模型,需要应对版本迭代,需要评估它在某些极端场景下是否满足要求。这些问题我在后面的选型对比和踩坑实录里会展开聊,这里先记住一个判断:Univer 把在线表格的下限抬高了很多,但产品化的后半程,依然要靠你自己的团队。
2. 为什么值得关注:Univer 的核心能力与设计思路
2.1 渲染方案:为什么表格类产品需要 Canvas 而不是 DOM
网格类表格有一个天然问题:行和列的规模很容易爆炸。一个 1000 行乘 30 列的表格,就已经是三万个单元格,如果用 DOM 实现,就意味着三万个节点常驻页面。哪怕你用虚拟滚动只渲染可视区域,一旦用户快速滚动,DOM 的创建、销毁、样式重算依然会带来明显的卡顿,这在低端设备上尤其致命。
Univer 选择了一条更“重画”的路线:表格区域用 Canvas 渲染,把整个表格当成一张动态画布,按视口区域绘制内容。用户滚动时,不需要操作 DOM 节点,只需要重新绘制可见区域内的像素。这种方案的性能上限比 DOM 高很多,也正是为什么很多人第一次打开 Univer 在线 Demo 时,会觉得滚动丝滑、编辑跟手。
我可以用一个类比来解释:DOM 方案像是用乐高积木搭一座房子,零件多、拆装灵活,但零件数量一大,找零件和管理结构会非常耗时;Canvas 方案像是直接画画,画布上每一帧重绘,你不用关心那些看不见的区域,画起来自然更快。当然,Canvas 也不是没有缺点,比如文本选中、无障碍支持、原生输入框接入,都比 DOM 方案麻烦。Univer 的做法是把 UI 外壳、工具栏这类交互区留在 DOM 层,网格内容主体放 Canvas,算是一种混合思路,实际使用中兼顾了性能和功能。
2.2 公式引擎:让表格从“长相”变成“能力”
如果只做一个漂亮网格,那它只是个“Table”,不是“Sheet”。真正让表格产生生产力的,是公式、单元格引用、依赖更新这些能力。Univer 在这块的思路是把公式引擎作为一个独立插件来注册,你不装它,单元格里写=SUM(A1:A3)就只是一段普通文本;装上它,公式才会被解析、计算、随引用变化自动更新。
从实现思路上讲,公式引擎本质上是在维护一张依赖图:A1 等于 B1 加 C1 时,引擎会记录 A1 依赖了 B1 和 C1,只要 B1 或 C1 发生变化,A1 就会被标记为“需要重算”。这种依赖追踪和前端框架里的响应式思想很类似,只不过作用对象变成了单元格,计算规则变成了 Excel 函数语法。好处是:你再也不用为了一个单元格的改动,把整张表全部重算一遍,性能上有保障。
实际业务里,公式是用户是否接受一个在线表格的“及格线”。很多业务人员可能不会写 VLOOKUP,但一定用过 SUM、IF、AVERAGE。Univer 在这些基础函数上覆盖得不错,更复杂的函数和特性也在持续补齐。我的建议是,在正式选型之前,把你业务里真正用到的函数和场景列一个清单,到官方文档或在线 Demo 里逐项验证,比听任何人拍胸脯都靠谱。
2.3 插件化架构:按需搭载,像积木一样组合
Univer 2.x 最让我欣赏的设计,是把能力拆得很细。核心包只负责基础设施,比如实例管理、命令总线、生命周期;而渲染、表格内核、UI 外壳、公式引擎、导入导出都是独立插件。使用的时候,你注册哪些插件,就拥有哪些能力,不需要的东西完全可以不装。
这样做最直接的好处是包体积可控。如果只是内部工具里嵌一个只读表格,你完全可以不注册 UI 插件,甚至不引入工具栏相关的代码,只保留渲染和内核;如果未来想要公式,再补注册公式引擎,不用重构代码。这种“积木式”组合,对于被 KPI 压着的业务团队来说非常友好,我们可以先交付一个小而美的版本,后面按需扩建,而不是一开始就把一个巨型编辑器塞进页面里。
插件化架构的另一个好处,是为二次开发提供了清晰的边界。我见过不少团队需要在表格里加自定义按钮、自定义函数、甚至自定义单元格类型。在插件化架构里,这些扩展点通常比在单体代码里改造更干净。你不需要去改 Univer 核心源码,只需要写一个插件,挂在对应的生命周期里,就能实现业务定制。
2.4 协同潜力:命令化操作带来的同步基础
在线文档最难的不是渲染,而是多人同时编辑时怎么保持一致。Univer 在这一点上的底子很好,原因是它的所有修改操作都走“命令”通道。你输入一个字符、改一个单元格、删一行,本质上是触发了一条命令,命令里包含动作类型和参数。命令可以被记录、被回放、被广播到其他端,这为协同编辑提供了非常自然的基础。
想象一下,A 用户和 B 用户同时打开同一个表格,A 执行了“把 A1 改成 100”这条命令,只要把这条命令通过服务端转发给 B,B 在本地同样执行一遍,两个端的数据状态就保持一致了。听起来好像很简单,实际工程里还要处理并发冲突、版本管理、离线恢复一堆问题,所以 Univer 也不会替你解决所有协同问题。但至少它的架构没有往“直接操作 DOM 再同步快照”的方向走,而是选择了更利于协同的命令模式,这让后续接入协同能力的成本低了不少。
我个人的看法是:如果你的产品最终必然要支持多人同时编辑,那么选择一个命令化架构的开源内核,比选择一个基于纯 DOM 操作同步的组件要靠谱得多。Univer 的协同不是说“装上就能跑”,但它让你看到了一个可以落地的路径。
3. 动手实战:把 Univer 在线表格嵌进你的页面
理论聊太多容易飘,下面直接进入实操环节。我会用 Vite 加 React 跑一个最简的 Univer 表格,把关键步骤和容易出错的地方讲清楚。由于 Univer 版本迭代很快,我下面给出的代码是当前 2.x 最常见的写法,你安装的版本如果有差异,以官方仓库中示例代码和包内的类型定义为准。
3.1 环境准备:Node、包管理器与项目脚手架
Univer 是一个纯前端项目,理论上只需要 Node 环境。我建议使用 Node 18 以上版本,因为新版 Vite 和大量依赖都对 Node 版本有要求,装一个旧版 Node 可能在启动阶段就报一堆奇奇怪怪的错。
包管理器方面,npm 和 pnpm 都可以,我更推荐 pnpm。原因很简单:pnpm 对依赖的安装更严格,不会产生那么多游离的 node_modules 垃圾,而且在大型 monorepo 项目里表现更稳定,Univer 自身的仓库也是类似的结构。如果你的团队已经统一用 npm,也不必强换,只是安装速度慢一些,踩坑概率高一些而已。
先创建一个标准 Vite 项目:
npm create vite@latest univer-demo -- --template react-ts cd univer-demo npm install这一步会生成一个 React + TypeScript 的脚手架。之所以选 TypeScript,是因为 Univer 的类型定义比较完整,写代码时能靠 IDE 自动提示减少拼错 API 的概率,对于不熟悉这个项目的人来说特别有用。
3.2 安装依赖:核心、UI、公式插件各管一摊
进入项目目录后,安装 Univer 相关依赖。下面这组包是我常用的最小组合:
npm install @univerjs/core @univerjs/sheets @univerjs/sheets-ui @univerjs/formula-engine @univerjs/ui等一下,这里我必须诚实提醒你:不同 2.x 小版本的包名和分类可能微调,比如公式引擎插件有时挂在@univerjs/engine-formula,UI 相关能力也可能合并到其他包里。建议你安装时以官方文档或者 npm 上的 latest 标签为准,直接搜索@univerjs就能看到当前有哪些包。
安装依赖本身很简单,难的是理解每个包干什么。@univerjs/core是内核,提供实例和命令系统;@univerjs/sheets提供表格的数据模型和编辑能力;@univerjs/sheets-ui是把表格渲染成可交互的 UI;@univerjs/ui提供工具栏、菜单等外壳;公式引擎负责函数解析和计算。你对照这个职责列表,就能大致知道哪些场景需要装哪些包。
3.3 初始化实例:从代码层面理解插件注册
Univer 的使用方式非常“插件化”:先创建一个 Univer 实例,然后依次注册插件。下面是一段比较典型的初始化代码:
import { Univer } from '@univerjs/core'; import { UniverSheetsPlugin } from '@univerjs/sheets'; import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'; import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'; import { UniverUIPlugin } from '@univerjs/ui'; const univer = new Univer(); univer.registerPlugin(UniverUIPlugin, { container: 'app', }); univer.registerPlugin(UniverSheetsPlugin, {}); univer.registerPlugin(UniverFormulaEnginePlugin, {}); univer.registerPlugin(UniverSheetsUIPlugin, {});这里最关键的是container: 'app',它告诉 UI 插件把编辑器渲染到哪个 DOM 容器里。如果你的页面里没有一个 id 为app的元素,初始化很容易报错。注册顺序上,一般先把 UI 外壳放前面,再注册表格内核和 UI 插件,实际执行顺序有问题时控制台会直接报错,不用太担心。
在 React 项目里,这段初始化代码通常放在useEffect里,组件卸载时再调用univer.dispose()释放资源。如果你不小心在每个组件渲染时都创建一个实例,页面会出现多个编辑器叠加、状态互相干扰的奇怪现象。我在一开始就吃过这个亏,所以提醒你务必保证“一个容器对应一个实例”。
为了让容器能真正容纳编辑器,样式上必须设置高度。常见做法是把页面根元素和容器都撑满:
html, body, #app { height: 100%; margin: 0; overflow: hidden; }这段 CSS 看着不起眼,但非常重要。Univer 在有明确高度的情况下才能计算渲染区域,如果容器高度是 0,编辑器往往白屏。
3.4 让表格活起来:输入数据与常用操作用法
初始化成功之后,页面上应该能看到一个可以交互的表格。直接点击单元格、输入内容、拖动选区,这些基本操作都不需要写代码。但如果希望通过代码去读取数据、写入数据,就涉及到 Univer 的命令系统了。
Univer 里,几乎所有修改都是通过命令完成的。比如你想把某个区域的值设置为指定内容,需要构造一条“设置区域值”的命令,分发给命令服务去执行。这种设计初看有点绕,好像不如直接调一个setCellValue方法直观,但一旦做了协同或者撤销重做,你会发现这种模式的巨大好处:每条修改都是可以被记录的,撤销、重放、同步都有了统一入口。
具体有哪些命令可用,每个命令里有哪些参数,不同版本会有所变化。我的建议是安装完依赖后,直接在node_modules对应的包目录里搜Command、SetRangeValues这些关键词,读一读.d.ts类型定义。你甚至可以在 IDE 里输入univer.getCommandService().executeCommand之后,利用自动补全查看当前版本支持的命令常量。这比自己背 API 可靠得多。
实际开发中,数据接入是一个绕不开的问题。你的业务数据存在服务端,Univer 表格只是为用户提供编辑界面,所以通常需要做两件事:一是把服务端数据映射到单元格区域,二是监听用户的编辑操作,把变化同步回服务端。第一件事可以通过命令或接口直接写入,第二件事需要了解 Univer 的变更事件机制。这里我不写死具体事件名,你在类型定义里找和 change、modified、edit 相关的监听器,基本就能摸清脉络。
3.5 别忘了导入导出:数据打通才是生产环境
很多人在 Demo 里玩得很开心,到了生产环境才发现,用户想上传一个 Excel 文件直接编辑,或者把编辑结果下载回本地。Univer 默认并不包含完整的 Excel 导入导出能力,这些功能要靠额外插件支持。
我强烈建议在做技术方案时,就把导入导出列为正式需求,而不是最后“看看能不能加”。因为 Excel 解析牵扯到的样式、公式、合并单元格、数据类型转换非常复杂,自己写解析器十有八九会翻车。用插件是目前最稳妥的方式,虽然插件也会有自己的坑,但至少维护成本低很多。
另外,如果你处理的是超大文件,不要天真地认为前端能一次解析几十 MB 的 Excel。就算 Univer 性能不错,浏览器里的解析和渲染也很难扛住海量数据。我在实际项目中会把“导入解析”放到服务端,前端只负责上传和展示解析结果,这样体验和稳定性都更有保障。
4. 选型对比:Univer、Luckysheet、OnlyOffice 该怎么选
选型这件事没有标准答案,但把几个主流方案放在一起,能帮你看清 Univer 的位置。这里我重点对比 Luckysheet、OnlyOffice 和商业表格组件,结合常见的业务场景给出建议。
4.1 和 Luckysheet:有渊源,但不是简单升级
因为 Univer 团队和 Luckysheet 的渊源,很多人会问:能不能从 Luckysheet 平滑迁移到 Univer?答案是不能。Univer 是一次架构重写,不是给 Luckysheet 换个皮,两者在 API 设计、数据模型、插件系统上几乎完全不一样。你没法把 Luckysheet 的配置项直接搬到 Univer 里用,需要重新阅读文档、重写接入代码。
那是不是说 Luckysheet 就完全不行了?也不是。Luckysheet 社区积累了很多资料,在某些特定版本里够用且稳定。问题是它的维护节奏和生态明显不如 Univer 活跃,新项目如果从两者之间选,我倾向 Univer,原因是它解决了很多 Luckysheet 时代的架构遗留问题,并且在向多文档类型演进。老项目如果 Luckysheet 跑得好好的,不一定非要迁移,任何技术升级都有成本。
4.2 和 OnlyOffice:一个轻一个重,定位不同
OnlyOffice 是另一条路线。它是一整套功能完整的办公套件,支持文档、表格、幻灯片、邮件等,可以私有化部署。它的优势是功能强大,文档兼容性高,适合要搭建“类 Office 门户”的场景。但缺点也很明显:重、复杂、定制前端比较困难,它更像一个成品软件让你去集成,而不是一个内核让你去深度改造。
如果你的需求只是“在某个管理后台里嵌入一个在线表格模块”,引入 OnlyOffice 属于杀鸡用牛刀。反过来,如果客户要求的是一个完整的在线办公环境,希望打开浏览器就跟打开 Office 一样,Univer 目前还替代不了 OnlyOffice 这种重量级选手。二者不是同赛道产品,选型时先想清楚产品边界。
商业组件里还有一类代表,比如 SpreadJS,功能成熟、技术支持和售后服务都有保障,但授权费用不低。对于 To B 项目来说,采购商业组件省下的研发时间也许远超授权费;但对于预算敏感的团队,Univer 这种开源方案能大幅降低成本。做技术选型时,不要只比功能列表,要把“定制成本、授权费用、团队维护能力、社区活跃度”全部算进总账里。
4.3 什么时候不建议用 Univer
我也要泼一点冷水,Univer 并不是万能的。如果你的需求只是单纯展示一个表格数据,不需要编辑、公式、合并单元格这些交互,那使用普通表格组件就行,完全不必要引入一个 SDK,徒增包体积和学习成本。
如果业务对 Excel 二进制兼容性有变态要求,比如要完整保留复杂的图表、宏、嵌入式对象,我建议你先拿真实文件做一轮验证再决定。开源项目的功能边界一直在变化,今天支持不代表下个版本支持,更重要的是能不能覆盖你的核心文件类型。不要因为“看起来很像 Excel”就盲目上车。
第三个谨慎场景是协同。Univer 的架构适合做协同,但它没有把协同作为零配置的默认功能。你需要自己准备服务端、消息通道、状态存储,还要处理冲突策略。如果团队里既没有后端资源,也没有在线协同经验,却非要上一套“多人同时编辑”,可能会陷入比预想更深的坑。这种情况下,要么买商业方案,要么先做单机编辑,把协同列为二期再慢慢评估。
5. 真实项目里最容易踩的坑
5.1 页面白屏:多半是高度问题
我见过的绝大多数 Univer “白屏”问题,根源都是容器高度为 0。Univer 初始化时并不知道你希望在哪个位置显示,它读取容器的尺寸后开始渲染,如果容器没有高度,画布虽然挂上去了,但画出来也没有可视区域。
解决办法很简单:给容器一个明确高度,最常用的是height: 100vh,或者像前面 CSS 里那样把 html、body、根容器的高度全部设成 100%。如果你的容器本身是隐藏的,要等它显示出来之后再初始化,否则初始化那一刻尺寸是 0,后面即使显示出来也不会自动重绘。遇到这种情况,通常需要手动调用一次 resize 方法,让编辑器重新计算布局。
5.2 公式不生效:可能没注册公式引擎
在 Univer 里,公式能力不是默认自带的。如果我只注册了表格和 UI 插件,然后在单元格里输入=SUM(A1:A3),它不会计算,只会当成普通文本摆在那里。这个问题很多新手都会遇到,因为界面看起来一切正常,唯独公式不动,很容易误判为 Bug。
排查方式很直接:检查你是否注册了公式引擎插件。如果你是从旧版本升级上来的,还要确认注册方式和包名是否发生了变化。另外,公式计算有时是异步的,大量公式时结果可能不会瞬间刷新,别因为看到短暂延迟就以为没生效,先等几秒,再查看控制台有没有报错。
5.3 界面语言问题:中文语言包要自己配
Univer 默认界面是英文的,工具栏、右键菜单这些 UI 文案都走国际化机制。如果你想给国内用户用,必须加载对应的中文语言包并配置默认语言,不能指望装完就自动识别浏览器语言。
这个配置本身不复杂,但在不同版本里的写法略有差异。我踩过一次坑:配了语言包但忘了在初始化参数里指定 locale,结果界面还是英文,后来发现语言包根本没生效。建议你把语言相关配置放在初始化最前面,并且验证一个最直观的区域,比如新建工作表的按钮文字,能变中文基本就说明配置成功了。
5.4 协同编辑不是开箱即用
“支持协同”和“开箱可用的协同”完全是两回事。Univer 的命令化架构确实让协同变得可行,但它只是提供了基础和可能性,服务端、房间管理、在线状态、并发控制这些工程环节都需要自己搭建。如果你只是把 Univer 装进页面,它就是一个本地编辑器,A 用户在浏览器里改了内容,B 用户那边毫不知情。
更现实的问题是,协同不只是技术问题,还牵扯到业务规则:两个人同时改同一个单元格,到底谁赢?有没有版本回滚?离线了怎么办?这些问题需要产品和技术一起梳理。如果你在选型阶段就被“还支持协同”这个外行话打动,那我劝你先冷静,做一个最小可行的同步原型,成本远比想象中高。
5.5 体积控制:只有好事才都带上
插件化设计方便归方便,但如果你图省事把插件全装一遍,配套的打包体积可能会让页面加载慢得离谱。我见过有人把文档、表格、幻灯片、导入导出、协同相关插件全部注册到一个页面里,首屏加载时间肉眼可见地上升,用户打开页面要转好几圈。
控制体积的思路很朴素:按需注册。页面需要什么能力就只装什么插件,编辑器所在的页面最好单独做路由懒加载,别让它拖累整个应用的启动速度。另外,打包时打开 tree shaking,移除未引用的代码,也能帮助减少最终产物体积。前端性能优化永远是在和“功能全面”搏斗,Univer 给了你选择权,但选择权意味着你要做判断。
6. 落地场景与我的实际体会
6.1 后台管理系统里的在线录入与审批
后台管理系统是 Univer 最典型的落地场景。采购单、预算表、绩效评估这类业务,天然适合用表格来录入和展示。以前团队可能用普通表单写一堆输入框,字段一多页面就很长,现在直接嵌入一个 Univer 表格,业务人员可以在表格里批量填写,还能用公式做实时汇总。
这个场景下,我不建议把 Univer 开放成完全自由的 Excel 编辑器,反而应该限制能力:只保留填写区域,锁定表头和公式区域,避免用户误改。Univer 的可定制性在这里很有价值,你能通过配置去掉不需要的菜单和按钮,让界面像一个业务表单,而不是一个通用表格工具。
6.2 低代码平台里的业务表设计器
另一个方向是把 Univer 当作低代码平台的“表设计器”。比如让业务人员配置一个规则表,定义字段、计算公式、校验规则,最终把表格的结构翻译成平台的数据模型。这种玩法对二次开发能力要求更高,但 Univer 的插件化和命令机制让扩展有据可依。
在这个场景里,重点不是编辑器本身,而是表格数据和业务数据的映射。你需要监听单元格变化,解析出结构化的配置,再同步给平台。过程会比较繁琐,但好处是用户熟悉表格操作,培训成本低。相比画一堆表单连线,一个所见即所得的表格往往更直观。
6.3 数据工具链里的网格编辑环节
Univer 还能用在数据清洗、批量导入前处理、运营配置这类工具链里。我做过一个内部数据配置工具,运营人员需要把几十列配置数据从一个平台搬到另一个平台,中间要用表格做校验和修改。原来大家直接在 Excel 里改完再上传,现在直接在网页上编辑,权限和版本管理都统一了。
这种场景的注意点是要控制数据量。Univer 表现确实不错,但你不该挑战浏览器极限。几十万行数据,最好还是用服务端处理,前端只展示预览和编辑少量结果。把“浏览器能打开”和“浏览器应该打开”分开,系统才能跑得稳。
最后分享一点个人体会。我在实际项目里把 Univer 嵌入过一个后台审批系统,从零到能用大概花了两天,真正开始花时间的是权限控制和数据同步这两块。我的感受是,Univer 把“做一个能在浏览器里运行的不错的在线表格”这件事的下限拉高了很多,但产品化的后半程,像协同、权限、导入性能、异常恢复,没有哪一项是开源组件替你做完的。如果你正面对同样的需求,我的建议是别急着把插件全装上,先拿一个小 Demo 跑通数据链路,再逐步添加能力,这个节奏比一步到位稳妥得多。