企业官网建设流程全解析

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 API，sheets、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-ui

npm 用户把pnpm add换成npm install即可。注意各@univerjs/*包版本需保持一致，详见 核心包 README。

初始化与创建第一个实例

页面上先放一个<div id="app"></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