Univer跑在浏览器和服务端同一套模型上的电子表格引擎【免费下载链接】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/univerUniver 是一个同构办公 SDK核心卖点是把表格、文档、幻灯片的编辑模型拆成可组合插件浏览器里渲染、Node.js 里跑 headless两边共用同一套 Facade API。选型办公编辑能力时它和直接嵌入某个 SaaS 编辑器是两条不同的路前者把模型层握在自己手里。它和普通表格组件差在哪多数表格组件解决的是展示 轻量编辑Univer 解决的是把整个办公应用的底座搬进产品。几个差异点模型与 UI 分离univerjs/sheets这一层完全不依赖 UI同一份工作簿逻辑可以在 Node.js 里做服务端计算、批量处理不依赖 DOM。全插件化组装仓库里 60 多个univerjs/*包各自是独立插件条件格式、筛选、数据验证、批注都是可选件按需组装或直接换掉。Facade 统一出口浏览器端和服务端都通过FUniver/FWorkbook/FRange这组高阶 API 操作对象不用直接戳底层命令系统。讲道理这套设计最受益的场景是产品里要嵌表格但表格只是功能之一——BI 工具、内部中台、AI Agent 的产物载体。纯静态报表渲染的话Univer 反而是重炮打蚊子。最小可运行路径仓库自带的示例工程用了 Preset 模式这也是 README 推荐的路径装两个包调一次createUniver再createWorkbook建表。pnpm add univerjs/presets univerjs/preset-sheets-core初始化时把容器 ID 传给 Preset挂载自动完成不用自己找 DOM 节点import { UniverSheetsCorePreset } from univerjs/preset-sheets-core import { createUniver, defaultTheme, LocaleType } from univerjs/presets const { univer, univerAPI } createUniver({ locale: LocaleType.ZH_CN, theme: defaultTheme, presets: [UniverSheetsCorePreset({ container: app })], })univerAPI.createWorkbook({ name: 示例工作簿 })装完第一件事把window.univerAPI挂到全局在控制台里玩 Facade API设值、改样式、订阅事件比翻文档快得多。页面里需要一个idapp的容器 div高度给满即可。想要完整功能集筛选、批注、数据验证等照 examples/ 里 preset-sheets-core 的例子把对应 Preset 依次塞进presets数组就行。如果对包体积和加载顺序有强诉求README 里还有 Plugin Mode逐个registerPlugin代价是十几行 import。拆三个核心模块渲染引擎Canvas 而非 DOM它管什么把单元格画到屏幕上负责滚动、冻结、合并单元格这些视觉行为。怎么设计不走 DOM 单元格路线主画布是 Canvas配合虚拟滚动只绘制视口内内容。UI 外壳工具栏、菜单才是 React 组件渲染核心是纯引擎。对集成方意味着什么DOM 方案在几千行带样式的表上会开始掉帧Canvas 方案的大表滚动压力小得多。同时渲染层和框架解耦React/Vue/Web Component 适配层只是薄壳换框架不用动渲染逻辑。公式引擎AST 到依赖图它管什么公式解析、求值、依赖追踪。怎么设计公式字符串先经 Lexer/Parser 变成 AST再转依赖图只有上游变了才重算下游。仓库里docs/tldr/formula-engine-architecture.tldr有更完整的拆解。对集成方意味着什么不是每个公式全表重算的黑盒大表里局部改一个单元格重算范围是可控的。自定义函数走扩展点注册即可不需要改引擎。表格核心模型 拦截器它管什么工作簿/工作表/单元格数据模型以及行列增删、引用范围ref-range的级联修正。怎么设计每个能力点都有对应的 Interceptor 槽位——编辑前、编辑后、取值时、自动行高时。上层插件条件格式、数据验证、排序就是往这些槽位里挂拦截器而不是 fork 核心代码。对集成方意味着什么想改单元格取值这种底层行为不用打补丁注册一个拦截器就行这也是二次开发的主入口下一节。两个真实场景场景一万行级密集样式表的滚动。仓库自带 Playwright 性能套件测试数据是 1200 行 × 80 列、每个单元格都带边框/背景/字体样式的 dense-text 表通过模拟 wheel 事件连续滚动 5 秒统计帧率。该场景的断言阈值是滚动 fps 25空表和溢出表场景的阈值拉到了 50 fps。测试代码在 e2e/perf/本地跑起来可以自己压。场景二跨平台视觉一致性。同一张表在 Chromium 的 macOS/Linux/Windows 上各截一张图做像素级比对快照文件直接躺在仓库的 e2e/visual-comparison/ 目录里。这套机制说明 Canvas 渲染的跨平台抖动是被持续盯住的对我们这种要在多操作系统内部署的产品来说比口头承诺兼容性好可信。扩展点怎么挂拿最常用的BEFORE_CELL_EDIT拦截器举例从注入容器里拿服务注册一个拦截器对象在编辑落盘前改数据或拦截校验import { SheetInterceptorService, BEFORE_CELL_EDIT } from univerjs/sheets import type { ICellData } from univerjs/core const injector univer.getInjector() injector .get(SheetInterceptorService) .addInterceptor(BEFORE_CELL_EDIT, { onBeforeCommandExecute(params, command) { // 在这里改写 unitId/workbookId 定位到的单元格数据 }, })注册方式就这一种拿到服务 →addInterceptor(槽位, 拦截器)。除单元格编辑外还有VALIDATE_CELL输入校验、命令级、范围级、自动行高等一组槽位docs/tldr/ 里的架构笔记会把 ref-range、permission 这些行为的内部逻辑讲清楚。收尾Univer 的定位是办公应用的底层引擎而非成品编辑器适合把表格/文档当核心功能来做的团队如果只是嵌个只读报表看更轻的方案即可。API 兼容预期见 docs/API_STABILITY.md本地跑示例参考 examples/。动手前先把仓库拉下来git clone https://gitcode.com/GitHub_Trending/un/univer在 examples 工程里把 preset 逐个加一遍比读十篇评测都管用。【免费下载链接】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），仅供参考 Univer：跑在浏览器和服务端同一套模型上的电子表格引擎
Univer跑在浏览器和服务端同一套模型上的电子表格引擎【免费下载链接】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/univerUniver 是一个同构办公 SDK核心卖点是把表格、文档、幻灯片的编辑模型拆成可组合插件浏览器里渲染、Node.js 里跑 headless两边共用同一套 Facade API。选型办公编辑能力时它和直接嵌入某个 SaaS 编辑器是两条不同的路前者把模型层握在自己手里。它和普通表格组件差在哪多数表格组件解决的是展示 轻量编辑Univer 解决的是把整个办公应用的底座搬进产品。几个差异点模型与 UI 分离univerjs/sheets这一层完全不依赖 UI同一份工作簿逻辑可以在 Node.js 里做服务端计算、批量处理不依赖 DOM。全插件化组装仓库里 60 多个univerjs/*包各自是独立插件条件格式、筛选、数据验证、批注都是可选件按需组装或直接换掉。Facade 统一出口浏览器端和服务端都通过FUniver/FWorkbook/FRange这组高阶 API 操作对象不用直接戳底层命令系统。讲道理这套设计最受益的场景是产品里要嵌表格但表格只是功能之一——BI 工具、内部中台、AI Agent 的产物载体。纯静态报表渲染的话Univer 反而是重炮打蚊子。最小可运行路径仓库自带的示例工程用了 Preset 模式这也是 README 推荐的路径装两个包调一次createUniver再createWorkbook建表。pnpm add univerjs/presets univerjs/preset-sheets-core初始化时把容器 ID 传给 Preset挂载自动完成不用自己找 DOM 节点import { UniverSheetsCorePreset } from univerjs/preset-sheets-core import { createUniver, defaultTheme, LocaleType } from univerjs/presets const { univer, univerAPI } createUniver({ locale: LocaleType.ZH_CN, theme: defaultTheme, presets: [UniverSheetsCorePreset({ container: app })], })univerAPI.createWorkbook({ name: 示例工作簿 })装完第一件事把window.univerAPI挂到全局在控制台里玩 Facade API设值、改样式、订阅事件比翻文档快得多。页面里需要一个idapp的容器 div高度给满即可。想要完整功能集筛选、批注、数据验证等照 examples/ 里 preset-sheets-core 的例子把对应 Preset 依次塞进presets数组就行。如果对包体积和加载顺序有强诉求README 里还有 Plugin Mode逐个registerPlugin代价是十几行 import。拆三个核心模块渲染引擎Canvas 而非 DOM它管什么把单元格画到屏幕上负责滚动、冻结、合并单元格这些视觉行为。怎么设计不走 DOM 单元格路线主画布是 Canvas配合虚拟滚动只绘制视口内内容。UI 外壳工具栏、菜单才是 React 组件渲染核心是纯引擎。对集成方意味着什么DOM 方案在几千行带样式的表上会开始掉帧Canvas 方案的大表滚动压力小得多。同时渲染层和框架解耦React/Vue/Web Component 适配层只是薄壳换框架不用动渲染逻辑。公式引擎AST 到依赖图它管什么公式解析、求值、依赖追踪。怎么设计公式字符串先经 Lexer/Parser 变成 AST再转依赖图只有上游变了才重算下游。仓库里docs/tldr/formula-engine-architecture.tldr有更完整的拆解。对集成方意味着什么不是每个公式全表重算的黑盒大表里局部改一个单元格重算范围是可控的。自定义函数走扩展点注册即可不需要改引擎。表格核心模型 拦截器它管什么工作簿/工作表/单元格数据模型以及行列增删、引用范围ref-range的级联修正。怎么设计每个能力点都有对应的 Interceptor 槽位——编辑前、编辑后、取值时、自动行高时。上层插件条件格式、数据验证、排序就是往这些槽位里挂拦截器而不是 fork 核心代码。对集成方意味着什么想改单元格取值这种底层行为不用打补丁注册一个拦截器就行这也是二次开发的主入口下一节。两个真实场景场景一万行级密集样式表的滚动。仓库自带 Playwright 性能套件测试数据是 1200 行 × 80 列、每个单元格都带边框/背景/字体样式的 dense-text 表通过模拟 wheel 事件连续滚动 5 秒统计帧率。该场景的断言阈值是滚动 fps 25空表和溢出表场景的阈值拉到了 50 fps。测试代码在 e2e/perf/本地跑起来可以自己压。场景二跨平台视觉一致性。同一张表在 Chromium 的 macOS/Linux/Windows 上各截一张图做像素级比对快照文件直接躺在仓库的 e2e/visual-comparison/ 目录里。这套机制说明 Canvas 渲染的跨平台抖动是被持续盯住的对我们这种要在多操作系统内部署的产品来说比口头承诺兼容性好可信。扩展点怎么挂拿最常用的BEFORE_CELL_EDIT拦截器举例从注入容器里拿服务注册一个拦截器对象在编辑落盘前改数据或拦截校验import { SheetInterceptorService, BEFORE_CELL_EDIT } from univerjs/sheets import type { ICellData } from univerjs/core const injector univer.getInjector() injector .get(SheetInterceptorService) .addInterceptor(BEFORE_CELL_EDIT, { onBeforeCommandExecute(params, command) { // 在这里改写 unitId/workbookId 定位到的单元格数据 }, })注册方式就这一种拿到服务 →addInterceptor(槽位, 拦截器)。除单元格编辑外还有VALIDATE_CELL输入校验、命令级、范围级、自动行高等一组槽位docs/tldr/ 里的架构笔记会把 ref-range、permission 这些行为的内部逻辑讲清楚。收尾Univer 的定位是办公应用的底层引擎而非成品编辑器适合把表格/文档当核心功能来做的团队如果只是嵌个只读报表看更轻的方案即可。API 兼容预期见 docs/API_STABILITY.md本地跑示例参考 examples/。动手前先把仓库拉下来git clone https://gitcode.com/GitHub_Trending/un/univer在 examples 工程里把 preset 逐个加一遍比读十篇评测都管用。【免费下载链接】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），仅供参考