使用 Univer Platform 通过自然语言驱动 Univer 电子表格，并构建原生 AI 电子表格。

https://github.com/user-attachments/assets/7429bd5f-d769-4057-9e67-353337531024

目录

• 🌈 亮点
• ✨ 特性
  • 📊 Univer Sheet
  • 📝 Univer Doc
  • 📽️ Univer Slide
• 🌐 国际化
• 👾 展示
• 💬 社区
• 🤝 贡献
• ❤️ 赞助
• 📄 许可证

🌈 亮点

• 📈 Univer 旨在支持 电子表格、文档 和 演示文稿。
• 🧙‍♀️ Univer 是 同构的。它可以在浏览器和 Node.js 上运行（未来还将支持移动设备），并且使用相同的 API。
• ⚙️ Univer 很容易 嵌入，可以无缝集成到您的应用程序中。
• 🎇 Univer 功能强大，提供了广泛的功能，包括 公式、条件格式化、数据验证、筛选、协同编辑、打印、导入与导出 等，未来还将推出更多功能。
• 🔌 Univer 高度可扩展，得益于其插件架构，开发者可以轻松在其基础上实现独特的功能需求。
• 💄 Univer 高度可定制，您可以通过 主题 来个性化界面外观。同时，它也支持国际化 (i18n)。
• 🥤 Univer 易于使用。通过 预设 和 Facade API，您可以快速上手。
• ⚡ Univer 性能优越。
  • ✏️ Univer 拥有基于 Canvas 的高效渲染引擎，能够完美渲染各种文档类型。该渲染引擎支持高级排版功能，如标点符号压缩、文本与图片布局以及滚动缓冲等。
  • 🧮 Univer 集成了闪电般的公式引擎，可在 Web Worker 中甚至在服务器端运行。
• 🌌 Univer 是一个 高度集成 的系统。文档、电子表格和幻灯片之间可以相互协作，甚至在同一画布上渲染，从而实现信息和数据在 Univer 内部的流动。

✨ 特性

Univer 为电子表格、文档和演示文稿提供了丰富的功能。以下是一些关键特性：

📊 Univer Sheets

• 核心功能：Univer 支持电子表格的核心功能，包括单元格、行、列、工作表和工作簿。
• 公式：广泛支持各类公式，涵盖数学、统计、逻辑、文本、日期时间、查找引用、工程、金融和信息等领域。
• 权限：允许限制对特定元素的访问。
• 数字格式化：支持根据特定条件格式化数字。
• 超链接：允许链接到外部网站、电子邮件地址以及其他电子表格中的位置。
• 浮动图片：允许在电子表格中插入图片，并将其放置在表格的任何位置。
• 查找与替换：提供在电子表格中搜索特定文本并将其替换为其他文本的功能。
• 筛选：允许根据特定条件筛选数据。
• 排序：允许根据特定条件对数据进行排序。
• 数据验证：支持限制输入到单元格中的数据类型。
• 条件格式化：支持根据特定条件对单元格应用格式。
• 评论：允许在单元格中添加评论以提供额外信息。
• 交叉高亮显示：支持在电子表格中显示交叉高亮，帮助用户快速定位选定的单元格。
• 禅意编辑器：提供无干扰的编辑体验，界面简洁，减少干扰。
• 数据透视表[^1]：支持数据透视表，允许用户汇总和分析数据。
• 迷你图表[^1]：支持迷你图表，即嵌入在单元格中的小型图表，用于直观展示数据。
• 打印[^1]：允许打印电子表格或将其导出为 PDF。
• 导入与导出[^1]：支持以 XLSX 格式导入和导出数据。
• 图表[^1]：支持多种类型的图表，包括柱状图、折线图、饼图、散点图等。
• 协同编辑[^1]：支持多名用户同时编辑同一份电子表格。同时还提供文件历史记录和恢复功能。
• 编辑历史[^1]：允许用户查看和恢复电子表格的先前版本。

📝 Univer Docs (rc)

• 核心功能：Univer 支持文档的核心功能，包括段落、标题、列表、上标、下标等。
• 列表：支持有序列表、无序列表和任务列表。
• 超链接：支持在文档中插入指向外部网站、电子邮件地址以及其他位置的链接。
• 浮动图片：允许在文档中插入图片，并支持文本与图片的布局。
• 页眉与页脚：允许为文档添加页眉和页脚。
• 评论：允许在文档中添加评论以提供额外信息。
• 打印[^1]：允许打印文档或将其导出为 PDF。
• 导入与导出[^1]：支持以 DOCX 格式导入和导出数据。
• 协同编辑[^1]：支持多名用户同时编辑同一份文档。

📽️ Univer Slides (开发中)

• 核心功能：Univer 将支持演示文稿的核心功能，包括幻灯片、形状、文本、图片等。

🌐 国际化

Univer 支持多种语言，包括：

• ca-ES
• en-US
• es-ES
• fa-IR
• ja-JP
• ko-KR
• ru-RU
• sk-SK
• vi-VN
• zh-CN
• zh-TW

其中，zh-CN 和 en-US 是官方支持的语言，其余语言则由社区贡献和维护。

您可以通过 使用自定义本地化包 添加所需的语言。同时，您也可以参考 贡献指南，帮助我们增加对新语言的支持。

👾 展示

将 Univer 嵌入到 AI 产品中，作为数据展示工具。

[![][examples-preview-capalyze]][examples-link-capalyze]

您可以在 Univer 示例 中找到所有示例。

📊 电子表格	📊 多实例	📊 Uniscript
[![][examples-preview-0]][examples-link-0]	[![][examples-preview-1]][examples-link-1]	[![][examples-preview-2]][examples-link-2]
📊 大数据	📊 协作	📊 协作游乐场
[![][examples-preview-3]][examples-link-3]	[![][examples-preview-4]][examples-link-4]	[![][examples-preview-5]][examples-link-5]
📊 导入与导出	📊 打印	📝 文档
[![][examples-preview-6]][examples-link-6]	[![][examples-preview-7]][examples-link-7]	[![][examples-preview-8]][examples-link-8]
📝 多实例	📝 Uniscript	📝 大数据
[![][examples-preview-9]][examples-link-9]	[![][examples-preview-10]][examples-link-10]	[![][examples-preview-11]][examples-link-11]
📝 协作	📝 协作游乐场	📽️ 演示文稿
[![][examples-preview-12]][examples-link-12]	[![][examples-preview-13]][examples-link-13]	[![][examples-preview-14]][examples-link-14]
📊 禅意编辑器	Univer Workspace（SaaS 版）
[![][examples-preview-15]][examples-link-15]	[![][examples-preview-16]][examples-link-16]

🔗 链接

• dev 分支最新预览
• 官方网站
• 预设仓库

🔒 安全性

Univer 致力于维护安全的代码库。我们遵循最佳安全实践，并定期更新依赖项。更多信息请参阅我们的 安全策略。

💬 社区

[![][github-community-badge]][github-community-link] [![][discord-community-badge]][discord-community-link] [![][stackoverflow-community-badge]][stackoverflow-community-link]

Univer 是一个包容且友好的项目。请在参与社区之前阅读我们的 行为准则。

加入 Univer 社区：

• 在 [Discord][discord-community-link] 上与我们及其他开发者交流。
• 在 [GitHub Discussions][github-community-link] 上发起讨论。
• 在 [Stack Overflow][stackoverflow-community-link] 上创建话题，并标记为 univer。

您还可以在以下平台找到 Univer：

[Twitter][twitter-community-link] | [YouTube][youtube-community-link]

🤝 贡献

我们欢迎任何形式的贡献。您可以向我们提交 问题或功能请求。请先阅读我们的 贡献指南。

如果您希望为 Univer 贡献代码，请同样参考贡献指南。它将指导您完成开发环境的搭建以及提交拉取请求的流程。

❤️ 赞助商

Univer 项目的成长与发展离不开其支持者和赞助商的帮助。如果您有兴趣支持我们的项目，诚挚邀请您考虑成为赞助商。您可以通过 Open Collective 进行赞助。

感谢我们的赞助商们，由于篇幅限制，此处仅列出部分赞助商，排名不分先后：

[![][sponsor-badge-0]][sponsor-link-0] [![][sponsor-badge-1]][sponsor-link-1] [![][sponsor-badge-2]][sponsor-link-2] [![][sponsor-badge-3]][sponsor-link-3] [![][sponsor-badge-4]][sponsor-link-4] [![][sponsor-badge-5]][sponsor-link-5] [![][sponsor-badge-6]][sponsor-link-6]

[![][backer-badge-0]][backer-link-0] [![][backer-badge-1]][backer-link-1] [![][backer-badge-2]][backer-link-2] [![][backer-badge-3]][backer-link-3] [![][backer-badge-4]][backer-link-4] [![][backer-badge-5]][backer-link-5] [![][backer-badge-6]][backer-link-6]

📄 许可证

版权所有 © 2021-2025 DreamNum Co., Ltd. 保留所有权利。

根据 Apache-2.0 许可证授权。

[^1]: 这些功能由 Univer 的非开源版本提供，该版本可免费用于商业用途，同时也提供付费升级方案。

Univer 快速上手指南

Univer 是一个用于创建和编辑电子表格、文档及演示文稿的同构全栈框架。它具备高性能、可扩展性强且易于嵌入应用的特点，支持浏览器端与 Node.js 端运行。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：Windows, macOS, 或 Linux
• Node.js：版本 >= 18.0.0 (推荐使用 LTS 版本)
• 包管理器：npm, yarn, pnpm 或 bun
• 前端框架：支持 React, Vue, Angular 或原生 JavaScript/TypeScript 项目

安装步骤

你可以通过主流包管理器将 Univer 的核心库及预设插件安装到你的项目中。推荐使用国内镜像源（如淘宝镜像）以加速下载。

1. 初始化项目（可选）

如果你还没有项目，可以快速创建一个 Vite 项目：

npm create vite@latest univer-demo -- --template react-ts
cd univer-demo

2. 安装依赖

安装 Univer 核心包、UI 组件包以及基础功能预设包：

使用 npm:

npm install @univerjs/core @univerjs/engine-render @univerjs/sheets @univerjs/ui @univerjs/sheets-ui @univerjs/network @univerjs/design

使用 pnpm:

pnpm add @univerjs/core @univerjs/engine-render @univerjs/sheets @univerjs/ui @univerjs/sheets-ui @univerjs/network @univerjs/design

提示：如果需要完整的开箱即用体验，可以直接安装官方提供的 Presets 包（包含常用功能配置）：

npm install @univerjs/presets

基本使用

以下是一个基于 React 的最简示例，展示如何在一个容器中渲染一个可编辑的电子表格。

1. 准备容器

在你的组件中创建一个用于挂载 Univer 的 DOM 节点。

// App.tsx
import { useEffect } from 'react';
import { Univer, UniverInstanceType } from '@univerjs/core';
import { UniverSheetsPlugin } from '@univerjs/sheets';
import { UniverUIPlugin } from '@univerjs/ui';
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui';
import { LocaleType } from '@univerjs/core';
import zhCN from '@univerjs/core/locale/zh-cn';

export default function App() {
  useEffect(() => {
    // 1. 创建 Univer 实例
    const univer = new Univer({
      locale: LocaleType.ZH_CN,
      locales: {
        [LocaleType.ZH_CN]: zhCN,
      },
    });

    // 2. 注册核心插件
    univer.registerPlugin(UniverSheetsPlugin);
    
    // 3. 注册 UI 插件 (需要传入容器选择器)
    univer.registerPlugin(UniverUIPlugin, {
      container: 'app',
      header: true,
      toolbar: true,
      footer: true,
    });

    univer.registerPlugin(UniverSheetsUIPlugin);

    // 4. 创建一个工作簿数据
    const workbookData = {
      id: 'workbook-001',
      sheetOrder: ['sheet-001'],
      sheets: {
        'sheet-001': {
          id: 'sheet-001',
          name: 'Sheet1',
          cellData: {
            0: {
              0: {
                v: '你好，Univer!',
                s: {
                  fs: 14,
                  bl: 1, // Bold
                },
              },
            },
          },
        },
      },
    };

    // 5. 创建实例并加载数据
    univer.createUnit(UniverInstanceType.UNIVER_SHEET, workbookData);
  }, []);

  return <div id="app" style={{ height: '600px' }}></div>;
}

2. 样式引入

确保在全局样式文件或入口文件中引入 Univer 的基础样式（如果使用 Presets 包通常会自动处理，手动安装需自行引入）：

/* index.css */
@import '@univerjs/ui/lib/index.css';
@import '@univerjs/sheets-ui/lib/index.css';
@import '@univerjs/design/lib/index.css';

html, body, #root, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}

3. 运行项目

启动开发服务器即可看到效果：

npm run dev

现在，你应该能看到一个包含工具栏、编辑区和状态栏的完整电子表格界面，并且单元格中已显示“你好，Univer!"。