ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

Univer:嵌入式电子表格、文档与演示文稿的全栈同构办公 SDK

Univer:嵌入式电子表格、文档与演示文稿的全栈同构办公 SDK Univer嵌入式电子表格、文档与演示文稿的全栈同构办公 SDK【免费下载链接】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 仓库的官方 README韩语版docs/readme/ko-KR.md与仓库源码编写系统梳理 Univer 作为“产品内办公应用”SDK 的定位、六大核心特性、Plugin Mode 与 Preset Mode 两种集成方式的完整代码路径以及运行时兼容性、开源/Pro 功能边界与本地开发指南。读完后你将能够直接在自有产品中选择合适模式集成 Univer并理解createUniver、UniverSheetsCorePreset等关键入口在源码中的真实装配逻辑。Univer 是什么Univer 是一个面向“在产品中构建办公应用”的开源 SDK它不强制你使用它的托管应用或固定 UI而是提供构建电子表格Sheets、文档Docs、演示文稿Slides体验所需的“积木块”building blocks。官方定义其为面向 Web 与服务器两端的全栈同构办公框架——插件化架构、Canvas 渲染、独立公式引擎以及浏览器和 Node.js 下均可使用的 Facade API共同构成可嵌入的生产力体验。Univer 适合以下场景在 SaaS 产品、内部工具、BI 工作流、AI 应用中嵌入电子表格或文档编辑能力在浏览器与相同架构下于服务端执行工作簿/文档处理以插件方式按需组合功能或以 Presets 快速起步通过自定义插件、命令Command、服务Service、UI 组件与 Facade API 扩展行为。需要注意Univer 不是一个简单的电子表格文件查看器而是一个用于构建自有生产力界面的框架。这一点也体现在仓库的 monorepo 结构中——packages/下按“核心逻辑包 对应-ui包”成对拆分如sheets与sheets-ui、sheets-filter与sheets-filter-ui与 docs/ISOMORPHIC.md 中“底层逻辑与 UI 必须拆分为两个插件”的同构架构原则一致。核心特性Univer 的官方亮点可归纳为六项特性说明面向大规模画布的渲染设计Canvas 渲染引擎加独立公式引擎让复杂工作簿保持响应性。渲染引擎位于packages/engine-render公式引擎位于packages/engine-formula插件化扩展功能可组合、可替换、可懒加载、可扩展Headless AI 基础设施在 Node.js 中运行工作簿与文档逻辑支撑 AI Agent、自动化与服务端工作流面向产品集成的 SDK框架适配器React / Vue / Web Components、Facade API、Presets、Headless Runtime 对齐真实集成路径暗色模式UI 组件与渲染引擎均支持 Light/Dark 主题统一的 Facade API在浏览器与 Node.js 中以一致的 API 操作工作簿、范围、公式、文档“为什么选择 Univer”可以从七个角度理解同构设计浏览器 UI 应用与 Node.js Headless 处理运行于同一套架构插件优先所有能力以可组合插件交付可增、删、换、懒加载Preset Mode追求“快速跑起来”时使用仓库presets/目录中经过整理的插件集合Plugin Mode需要自定义加载、更小打包体积或深度集成时直接组合底层包Facade API以高层 API 操作工作簿、工作表、范围、文档、公式、命令与事件Canvas 渲染引擎支撑大型可编辑文档表面且多种文档类型共享同一渲染层可扩展 UI可嵌入 React、Vue、Web Components 及各类框架应用外壳。快速开始Plugin Mode 与 Preset Mode要同时获得完整产品能力与精细化控制应使用Plugin Mode在受支持的 Sheets、Docs、Node 配置下Preset Mode提供更短的 curated 初始化流程。Plugin ModePlugin Mode 允许在更低的层面控制包依赖、样式导入、locale 合并、Facade API 注册与插件配置。安装依赖pnpm add univerjs/core univerjs/design univerjs/docs univerjs/docs-ui univerjs/engine-formula univerjs/engine-render univerjs/sheets univerjs/sheets-formula univerjs/sheets-formula-ui univerjs/sheets-numfmt univerjs/sheets-numfmt-ui univerjs/sheets-ui univerjs/ui初始化代码注意三类导入CSS 样式、各包的facade子路径、插件类import { LocaleType, mergeLocales, Univer } from univerjs/core import { FUniver } from univerjs/core/facade import DesignEnUS from univerjs/design/locale/en-US import { UniverDocsPlugin } from univerjs/docs import { UniverDocsUIPlugin } from univerjs/docs-ui import DocsUIEnUS from univerjs/docs-ui/locale/en-US import { UniverFormulaEnginePlugin } from univerjs/engine-formula import { UniverRenderEnginePlugin } from univerjs/engine-render import { UniverSheetsPlugin } from univerjs/sheets import SheetsEnUS from univerjs/sheets/locale/en-US import { UniverSheetsFormulaPlugin } from univerjs/sheets-formula import SheetsFormulaEnUS from univerjs/sheets-formula/locale/en-US import { UniverSheetsFormulaUIPlugin } from univerjs/sheets-formula-ui import SheetsFormulaUIEnUS from univerjs/sheets-formula-ui/locale/en-US import { UniverSheetsNumfmtPlugin } from univerjs/sheets-numfmt import { UniverSheetsNumfmtUIPlugin } from univerjs/sheets-numfmt-ui import SheetsNumfmtUIEnUS from univerjs/sheets-numfmt-ui/locale/en-US import { UniverSheetsUIPlugin } from univerjs/sheets-ui import SheetsUIEnUS from univerjs/sheets-ui/locale/en-US import { UniverUIPlugin } from univerjs/ui import UIEnUS from univerjs/ui/locale/en-US import univerjs/design/lib/index.css import univerjs/ui/lib/index.css import univerjs/docs-ui/lib/index.css import univerjs/sheets-ui/lib/index.css import univerjs/sheets-formula-ui/lib/index.css import univerjs/sheets-numfmt-ui/lib/index.css import univerjs/engine-formula/facade import univerjs/ui/facade import univerjs/sheets/facade import univerjs/sheets-ui/facade import univerjs/sheets-formula/facade import univerjs/sheets-numfmt/facade const univer new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DesignEnUS, UIEnUS, DocsUIEnUS, SheetsEnUS, SheetsUIEnUS, SheetsFormulaEnUS, SheetsFormulaUIEnUS, SheetsNumfmtUIEnUS, ), }, }) univer.registerPlugin(UniverRenderEnginePlugin) univer.registerPlugin(UniverFormulaEnginePlugin) univer.registerPlugin(UniverUIPlugin, { container: app }) univer.registerPlugin(UniverDocsPlugin) univer.registerPlugin(UniverDocsUIPlugin) univer.registerPlugin(UniverSheetsPlugin) univer.registerPlugin(UniverSheetsUIPlugin) univer.registerPlugin(UniverSheetsFormulaPlugin) univer.registerPlugin(UniverSheetsFormulaUIPlugin) univer.registerPlugin(UniverSheetsNumfmtPlugin) univer.registerPlugin(UniverSheetsNumfmtUIPlugin) const univerAPI FUniver.newAPI(univer) univerAPI.createWorkbook({})其中new Univer()接受的核心配置由 packages/core/src/univer.ts 中的IUniverConfig定义除locale/locales外还包括theme、darkMode、region、direction默认ltr、logLevel、logCommandExecution、undoRedoHistoryLimit默认 50设为 0 可禁用撤销历史以及overrideDI 依赖覆盖表。FUniver.newAPI(univer)则负责把各插件注册的 Facade API 组合成统一的高层入口。Preset ModePreset 是包含“需要的 Facade API 注册与样式”的 Univer 插件整理集合pnpm add univerjs/presets univerjs/preset-sheets-coreimport { UniverSheetsCorePreset } from univerjs/preset-sheets-core import UniverPresetSheetsCoreEnUS from univerjs/preset-sheets-core/locales/en-US import { createUniver, LocaleType, mergeLocales } from univerjs/presets import univerjs/preset-sheets-core/lib/index.css const { univerAPI } createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales(UniverPresetSheetsCoreEnUS), }, presets: [ UniverSheetsCorePreset({ container: app, }), ], }) univerAPI.createWorkbook({})页面中需要一个容器节点div idapp styleheight: 100vh/div从源码看 Preset Mode 的装配逻辑presets/src/preset.ts 中的createUniver会解析presets与额外的plugins选项按pluginName去重同一插件被重复注册会直接抛错随后逐个registerPlugin最后调用FUniver.newAPI(univer)生成并返回{ univer, univerAPI }。它还支持override依赖覆盖用null可移除某依赖与collaboration: true自动移除本地 UndoRedo、AuthzIo、MentionIo 三个本地服务为协作接管做准备。presets/packages/preset-sheets-core/src/preset.ts 中的UniverSheetsCorePreset(config)展示了 Preset 的完整配置面container默认app、workerURL传入后启用 Web Worker 模式并设置notExecuteFormula把公式计算委托到 worker、header/toolbar/ribbonType/menu/contextMenuUI 定制、disableAutoFocus、customFontFamily以及嵌套的docs/sheets/formula/ numfmt 相关配置。它一次性装配了 Network、Docs、RenderEngine、UI、DocsUI、可选RPCMainThread、FormulaEngine、Sheets、SheetsUI、SheetsNumfmt、SheetsNumfmtUI、SheetsFormula、SheetsFormulaUI 等插件链因此“一行 Preset”即可等价于 Plugin Mode 中十余个registerPlugin调用。仓库自带可运行示例 examples/src/preset-sheets-core/main.ts它叠加了UniverSheetsCorePreset加上 Drawing、ConditionalFormatting、Filter、HyperLink、DataValidation、FindReplace、Note、Sort、Table、ThreadComment 等十余个功能 Preset并通过plugins: [ImportCSVButtonPlugin]演示了在 Preset 之外追加自定义插件的写法。三种模式如何选选择使用场景入手点Plugin Mode需要严格控制包、传递依赖、懒加载与运行时配置本仓库examples/与架构指南Preset Mode需要最小配置的 Sheets / Docs / Node 方案本仓库presets/与入门指南Headless Mode无 UI 的服务端工作簿/文档处理、公式计算、自动化Node 侧 Headless Univer版本要求所有univerjs/*包必须保持同一版本若同时使用 Univer Prouniverjs-pro/*的版本也要对齐。API 兼容性预期stable / experimental / internal / deprecation / breaking change 规则见 docs/API_STABILITY.md。运行时兼容性浏览器运行时Univer 以 Chrome 88 为编译目标并在 Edge ≥88、Firefox ≥90、Chrome ≥88、Safari ≥14.1、Electron ≥12 上保持良好运行的努力PolyfillsUniver 依赖Intl.Segmenter。若目标浏览器或运行时不提供该 API需自行引入类似formatjs/intl-segmenter的 polyfill构建工具推荐 Vite、esbuild、Webpack 5。若构建工具不支持package.json的exports字段Webpack 4 常见可能需要额外的 path mappingReact视图层基于 React 18 构建完整支持 React 18 与 19并对 React 16.9 / 17 提供最低限度的兼容支持Node.js 运行时Headless Univer 支持 Node.js ≥18.17.0而开发本 monorepo 本身需要 Node.js ≥22.18见 package.json 的devEngines字段pnpm ≥11。功能矩阵开源能力与 Pro 扩展领域开源能力Univer Pro 扩展Sheets工作簿、工作表、范围、选择、公式、数字格式、过滤、排序、数据校验、条件格式、超链接、批注、查找替换、笔记、表格、绘图集成、可扩展 UI 插件实时协作、编辑历史、导入/导出、打印、图表、数据透视表、迷你图、分组大纲、图形、单元格内图形、数据连接器、服务端计算、增强公式功能Docs富文档模型、编辑 UI、列表、超链接、绘图集成、批注、快速插入、共享文档架构协作、导入/导出、打印、增强表格/列表、分栏、callout、代码块、引用、图形、远程批注资源Slides演示文稿数据模型与 UI 包处于活跃开发中Pro 演示模型/UI、导入/导出、图表与表格模型及 UI 插件、共享图形编辑基础设施Bases可基于 Univer 的 plugin / command / model 架构构建自定义结构化数据体验Base 数据库模型、命令、公式集成、工作台 UI、字段编辑器、渲染引擎视图Runtime浏览器应用、Node.js Headless 使用、Web Worker / RPC 模式、多实例、服务端自动化协作客户端/服务器包、Node.js 协作客户端、Pro 服务端服务、SSR、计算委托、服务端计算、changeset 重放工具IntegrationsReact、Vue、Web Components、框架模板、主题、国际化、自定义插件Pro Presets、企业部署包其中 Sheets 是当前最成熟的产品领域Docs 与 Slides 共享 Univer 的架构在同一 SDK 中持续演进。开源与 Pro 的边界原则本仓库包含 Univer 的开源核心与第一方 OSS 插件Univer Pro 是作为商业扩展层单独开发的高级产品表面协作、服务端能力、企业集成。仓库明确声明了四条边界原则OSS 包在 Apache-2.0 许可下独立可用Pro 是可选的使用公开univerjs/*SDK API 不依赖 ProOSS 包的 bug、回归与安全问题的报告与修复都在 OSS 仓库进行即使相关 Pro 功能存在OSS 文档不应暗示 Pro-only 能力属于公开的univerjs/*包Pro-only 的 API / 包 / 部署路径必须明确标注即使某 OSS 功能有 Pro 增强OSS 行为也必须独立可文档化用户无需先读商业文档即可评估开源表面。开源与 Pro 的完整分类对照Foundation / Sheets / Docs / Slides / Bases / Server and runtime 六个维度详见仓库 README 的 OSS 与 Pro 对照表。仓库结构. ├── packages/ Core packages, engines, document types, UI plugins, feature plugins ├── examples/ 开发用本地浏览器及 Node.js 演示 ├── common/ 共享内部工具、mock 数据、storybook、utilities ├── e2e/ Playwright 与视觉对比测试 ├── tests/ 额外的集成测试工程 └── docs/ 架构笔记、图片、仓库内文档各包的 README 位于packages/内对应包目录旁。packages/下的关键组成包括core核心运行时与 Facade 基础、engine-renderCanvas 渲染引擎、engine-formula公式引擎、design与ui组件与设计体系、sheets/sheets-ui电子表格核心与 UI、docs/docs-ui文档、slides/slides-ui演示以及按功能拆分的sheets-filter、sheets-sort、sheets-table、sheets-conditional-formatting、sheets-data-validation、sheets-hyper-link、sheets-note、sheets-thread-comment、sheets-drawing等“逻辑 UI”成对插件。本地开发指南环境要求Node.js ≥22.18pnpm ≥11pnpm install pnpm dev如需克隆仓库git clone https://gitcode.com/GitHub_Trending/un/univer.git后进入目录执行上述命令。常用命令均来自 package.json 的scripts命令用途pnpm dev启动本地 examples 演示应用--host 0.0.0.0pnpm build构建 workspace 包排除内部 common 包分build:plugins与build:presets两段执行pnpm test通过 Turbo 运行单元测试pnpm typecheck通过 Turbo 运行 TypeScript 检查pnpm lint运行 ESLintpnpm test:e2e运行 Playwright 测试pnpm storybook:dev启动 UI 组件开发用 Storybook此外仓库还提供pnpm use:react16/pnpm use:react19等脚本来切换 React 版本做兼容性验证对应上文 React 16.9 ~ 19 的支持范围。提交 PR 前请先阅读 CONTRIBUTING.md。贡献者必读的仓库内文档对仓库做较深改动前值得通读以下内部文档均位于docs/目录docs/ISOMORPHIC.md浏览器、Node.js、UI 与共享插件逻辑的拆分方式——同构功能需拆成“底层逻辑插件 UI 插件”两半命令尤其 MUTATION应实现在底层逻辑中不直接读 UI 状态docs/API_STABILITY.mdstable、experimental、internal、deprecated 与 breaking change 的预期docs/CONTRIBUTING-FACADE.mdFUniver、FWorkbook、FRange等 Facade API 的设计准则docs/NAMING_CONVENTION.md文件、目录、接口、插件、命令、DI token 的命名规则docs/FIX_MEMORY_LEAK.mdUniver 实例的常见内存泄漏模式与调试流程docs/tldr/公式引擎、Web Worker、权限、选择、ref-range 等主题的简明架构备忘录。生态与许可Core SDKdream-num/univer即本 monorepoPresets本仓库presets/面向浏览器与 Node.js 应用的 curated 插件集合AI agent skillsdream-num/univer-sdk-skills面向 AI Agent 的 Univer 集成、Pro 功能、插件开发与 Node 后端复用指引Examples and showcase本仓库examples/与各 preset 演示AI-native spreadsheetsdream-num/univer-mcp以自然语言控制 Univer Sheets 的 MCP 集成。本仓库以Apache-2.0许可发布见 LICENSE版权为 DreamNum Co., Ltd.2021 年至今。【免费下载链接】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),仅供参考
RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进