Univer实战入门从零搭建可嵌入 Web 的协作电子表格【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univer给内部系统加一个可嵌入的在线表格是很多团队都会遇到的需求现有方案要么只能独立部署、要么多人协作能力弱、要么无法嵌进既有页面。Univer 是一套覆盖电子表格、文档与幻灯片的全栈协作框架核心能力拆成一组独立 npm 包按需引入同一套代码同时支持浏览器与 Node.js 服务端运行。读完本文你会完成一次从插件注册、创建表格实例、写入数据与公式到对接协作传输层的最小可用流程。项目定位Univer 的定位是文档与数据协作的全栈框架产品形态上覆盖电子表格、文字文档、幻灯片三块运行环境上同时支持 Web 与 Node 服务端比如用 Node 端跑公式计算或做服务端导出。架构上它把能力切成一组可独立安装的包core 提供运行时、依赖注入与 Facade APIsheets、docs、slides 与各自的 UI 包按功能拆分渲染引擎基于 Canvas公式计算可以放进 Web Worker 执行避免阻塞主线程。这种拆分意味着你只引入表格相关包就能把 Univer 嵌进 React、Vue 或原生 Web Component 页面不必为用不到的产品形态付出体积代价。项目总览见 根目录 README。 快速开始环境要求Node.js 18 以上配合 Vite、Webpack 等任一支持 ES Modules 的构建工具即可本地跑通不需要数据库或后端。安装pnpm add univerjs/core univerjs/ui univerjs/engine-render univerjs/sheets univerjs/sheets-uinpm 用户把pnpm add换成npm install即可。注意各univerjs/*包版本需保持一致详见 核心包 README。初始化与创建第一个实例页面上先放一个div idapp/div作为挂载容器然后import { LocaleType, Univer } from univerjs/core; import { FUniver } from univerjs/core/facade; // 此处省略其余插件包与 Facade 的导入完整清单见示例工程 const univer new Univer({ locale: LocaleType.ZH_CN }); // 注册插件UI 容器、渲染引擎、表格核心与表格 UI univer.registerPlugins([ [UniverUIPlugin, { container: app }], [UniverRenderEnginePlugin], [UniverSheetsPlugin], [UniverSheetsUIPlugin], ]); const univerAPI FUniver.newAPI(univer); const fWorkbook univerAPI.createWorkbook({});createWorkbook({})会创建一个带默认工作表的空白工作簿后续的写入、样式、公式操作都通过fWorkbook及其下的工作表对象完成。 核心能力演示下面以一张「团队薪资表」为例走一遍典型业务路径写入数据加样式与公式最后合并标题并保存导出。所有操作基于活动工作表对象fSheet。场景写入表头与员工数据拿到活动工作表后用 A1 表示法选中区域即可读写不需要换算行列下标const fSheet fWorkbook.getActiveSheet(); // 第 2 行写表头第 3-5 行写员工数据 fSheet.getRange(A2:C2).setValues([[姓名, 部门, 工资]]); fSheet.getRange(A3:C5).setValues([ [张三, 研发, 15000], [李四, 产品, 13000], [王五, 研发, 18000], ]); // 读取 C3:C5验证写入结果 console.log(fSheet.getRange(C3:C5).getValues());数据即时渲染到画布getValues()返回二维数组[[15000], [13000], [18000]]。场景表头样式与合计公式写入值的同时可以内联单元格样式公式则以开头的字符串直接写入// 表头加粗并用 ICellData 内联底色s 为样式对象 fSheet.getRange(A2:C2).setFontWeight(bold); fSheet.getRange(A2:C2).setValues([ [{ v: 姓名, s: { bg: { rgb: #E8F0FE } } }, 部门, 工资], ]); // D3 写公式 开头的字符串会触发公式引擎计算 fSheet.getRange(D3).setValue({ f: SUM(C3:C5) }); // 读取计算结果 console.log(fSheet.getRange(D3).getValues());D3 单元格显示合计 46000公式参与后续编辑与保存而不是只存一个静态结果。场景合并标题并保存导出最后合并 A1:C1 作为大标题并把整本工作簿的数据取回内存// 合并 A1:C1 作为大标题 fSheet.getRange(A1:C1).merge(); fSheet.getRange(A1).setValue(2026 Q3 薪资表); // save 返回完整工作簿数据可直接持久化到后端 const workbookData fWorkbook.save(); console.log(workbookData);协作编辑协作的前提是有一条消息传输通道。Univer 把跨端通信抽象成 RPC 层浏览器端通过univerjs/rpc把 RPC 实例放进独立 Web Worker再配合univerjs/network插件把操作指令序列化成可传输的事件流最小接入如下import { UniverNetworkPlugin } from univerjs/network; import { UniverRPCMainThreadPlugin } from univerjs/rpc; // 协作 RPC 运行在独立 Web Worker 中避免阻塞主线程 const worker new Worker(new URL(./worker.ts, import.meta.url), { type: module }); univer.registerPlugins([ [UniverRPCMainThreadPlugin, { workerURL: worker }], [UniverNetworkPlugin], ]); univer.onDispose(() worker.terminate());实际落地时把网络传输对接到自家后端一条 WebSocket 即可多个客户端各自回放收到的变更指令就能保持数据一致。仓库中的rpc-node包提供了 Node 侧的 RPC 实现可用于快速搭一个多端同步的演示服务传输细节见 网络插件源码。延伸阅读示例工程入口插件注册全景表格 Facade 源码区域与单元格操作贡献指南参与项目开发一套代码Web 与服务端通用。【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
