核心功能

Univer Sheets 的核心功能包含了电子表格编辑器、公式引擎、渲染引擎、数字格式化引擎、设计系统和 UI 组件库等。它们共同构成了一个强大的电子表格处理平台,支持多种电子表格格式和复杂的电子表格操作。

特性

Univer Sheets 的核心功能包括:

  • 电子表格渲染:支持 Univer Sheets 的渲染和光标、选区的绘制。
  • 单元格样式:支持对电子表格中的单元格进行样式设置,包括字体、颜色、边框、对齐等。
  • 公式计算:支持在电子表格中添加和计算公式,支持几乎所有的 Excel 公式,包括数学、统计、文本、日期等函数。
  • 数字格式化:支持对电子表格中的数字进行格式化,包括货币、百分比、日期等格式。
  • 网格线和冻结窗格:支持显示网格线和冻结窗格功能,方便用户查看和编辑大数据量的电子表格。
  • 默认样式:支持对电子表格的默认样式进行设置,包括默认字体、字号、颜色等。
  • 插件系统:支持插件系统,可以自定义插件,这也是 Univer 核心架构能力之一。

预设模式

安装

Shell
pnpm add @univerjs/presets @univerjs/preset-sheets-core

使用

TypeScript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.ZH_CN,  locales: {    [LocaleType.ZH_CN]: mergeLocales(UniverPresetSheetsCoreZhCN),  },  presets: [UniverSheetsCorePreset()],})univerAPI.createWorkbook({})

预设与配置

@univerjs/presets

本预设提供了创建 Univer 应用所需的 createUniver 方法,以及暴露了 @univerjs/core@univerjs/design 的所有方法和对象。

createUniver 方法接受一个配置对象,包含主题、语言、预设等选项,返回一个 Univer 实例 univer 和用于调用 Facade API 的 FUniver 实例 univerAPI

TypeScript
interface CreateUniverParameter {  // Univer 实例的主题,默认使用 defaultTheme  theme: IStyleSheet  // 是否使用暗黑模式,默认为 false。  darkMode?: boolean  // Univer 实例的语言环境  locale: LocaleType  region?: LocaleType  // 要使用的语言环境对象,键为语言环境类型,值为对应的语言环境对象  locales: ILocales  // Univer 实例的日志级别  logLevel?: LogLevel  // 要使用的预设列表。  presets: IPresets[]  // 要使用的插件列表。  plugins: IPlugins[]}

参考:createUniver

@univerjs/preset-sheets-core

本预设是 Univer Sheets 的核心预设,包含了文档编辑器、公式引擎、渲染引擎等电子文档必要的核心功能。

TypeScript
interface IUniverSheetsCorePresetConfig {  // 容器元素,可以是字符串或者 DOM 元素  container?: string | HTMLElement  // 是否显示头部  header?: boolean  // 是否显示头部工具栏  toolbar?: boolean  // 头部工具栏的类型。'classic': 默认经典模式;'grid': 两行网格模式;'collapsed': 紧凑模式;'simple':不分组模式  ribbonType?: RibbonType  // 是否显示底部。  footer?:    | false    | {        // Sheet bar 是子表管理器,包括添加/切换/删除子表。        sheetBar?: boolean        // 统计栏包括当前选区的统计信息,如计数、总和、平均值等。        statisticBar?: boolean        // 在底部的菜单,包括高亮、网格线等。        menus?: boolean        // 底部的缩放滑块。        zoomSlider?: boolean        /**         * 工作表栏中“添加工作表”按钮的配置。         */        addSheetButtonConfig?: {          /**           * 是否显示工作表栏中的“添加工作表”按钮。           * 当 `footer` 或 `footer.sheetBar` 为 false 时,此配置将不起作用,因为工作表栏将不会被渲染。           * @default true           */          show?: boolean          /**           * 新建工作表的默认行数。           * @default 1000           */          defaultRowCount?: number          /**           * 新建工作表的默认列数。           * @default 20           */          defaultColumnCount?: number        }      }  // 是否显示右键菜单  contextMenu?: boolean  // 是否禁用自动聚焦  disableAutoFocus?: true  // 依赖注入的覆盖配置  override?: DependencyOverride  // 菜单配置  menu?: MenuConfig  sheets?: {    // 如果行样式和列样式都设置了,行样式是否优先于列样式    isRowStylePrecedeColumnStyle?: boolean    // 自动高度是否适用于合并单元格    autoHeightForMergedCells?: boolean    /**     * 是否将冻结状态同步到实时协作中的其他用户。     * @default true     */    freezeSync?: boolean    clipboardConfig?: {      // 在粘贴操作后是否显示粘贴选项按钮      hidePasteOptions?: boolean    }    // 滚动条配置    scrollConfig?: IScrollBarProps    /**     * 权限保护范围阴影显示策略。     * - true 或 'always':显示所有受保护范围的阴影(默认行为)     * - 'non-editable':仅显示无法编辑的范围的阴影(编辑权限为 false)     * - 'non-viewable':仅显示无法查看的范围的阴影(查看权限为 false)     * - false 或 'none':从不显示受保护范围的阴影     * @default true     */    protectedRangeShadow?: boolean | 'always' | 'non-editable' | 'non-viewable' | 'none'    // 是否禁用强制字符串警告。    disableForceStringAlert?: boolean    // 是否禁用强制字符串标记。    disableForceStringMark?: boolean  }  // ... 更多配置项}

其中,menu 配置项可以用于简单地设置某些特定菜单项的显示或隐藏等状态:

TypeScript
UniverSheetsCorePreset({  menu: {    'sheet.command.set-range-bold': {      hidden: true,    },    'sheet.command.set-range-italic': {      hidden: true,      disabled: true,    },  },})

这里的 'sheet.command.set-range-bold''sheet.command.set-range-italic' 是命令的名称,表示对应的菜单项。可参考下方的 菜单项 ID 列表

参考:@univerjs/preset-sheets-core

插件模式

安装

Shell
pnpm add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui

使用

TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import DesignZhCN from '@univerjs/design/locale/zh-CN'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIZhCN from '@univerjs/docs-ui/locale/zh-CN'import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverSheetsPlugin } from '@univerjs/sheets'import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui'import SheetsFormulaUIZhCN from '@univerjs/sheets-formula-ui/locale/zh-CN'import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt'import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui'import SheetsNumfmtUIZhCN from '@univerjs/sheets-numfmt-ui/locale/zh-CN'import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'import SheetsUIZhCN from '@univerjs/sheets-ui/locale/zh-CN'import SheetsZhCN from '@univerjs/sheets/locale/zh-CN'import { UniverUIPlugin } from '@univerjs/ui'import UIZhCN from '@univerjs/ui/locale/zh-CN'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/docs-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.ZH_CN,  locales: {    [LocaleType.ZH_CN]: mergeLocales(      DesignZhCN,      UIZhCN,      DocsUIZhCN,      SheetsZhCN,      SheetsUIZhCN,      SheetsFormulaUIZhCN,      SheetsNumfmtUIZhCN,    ),  },})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)

插件与配置

@univerjs/core

本插件是 Univer 的核心库,提供了创建 Univer 实例、主题、语言等基础功能。

TypeScript
interface UniverParameter {  // Univer 实例的主题,默认使用 defaultTheme  theme: IStyleSheet  // 是否使用暗黑模式,默认为 false  darkMode?: boolean  // Univer 实例的语言环境  locale: LocaleType  // 要使用的语言环境对象,键为语言环境类型,值为对应的语言环境对象  locales: ILocales  // Univer 实例的日志级别  logLevel?: LogLevel}

参考:Univer

@univerjs/engine-render

本插件是 Univer 的渲染引擎,负责渲染、滚动条、光标和选区等的绘制。其提供了 UniverRenderEnginePlugin 插件。

参考:@univerjs/engine-render

@univerjs/engine-formula

本插件是 Univer 的公式引擎,负责公式的计算和处理。其提供了 UniverFormulaEnginePlugin 插件。

参考:@univerjs/engine-formula

@univerjs/design

本插件是 Univer 的设计系统,提供了所有的基础组件和样式。

详见: UI 章节

@univerjs/ui

本插件是 Univer 的 UI 基座。其提供了 UniverUIPlugin 插件。

UniverUIPlugin 提供了一些配置项,可用于基础布局的配置。

TypeScript
interface IUniverUIConfig {  // 容器元素,可以是字符串或者 DOM 元素。  container?: string | HTMLElement  // 是否显示头部  header?: boolean  // 是否显示头部工具栏  toolbar?: boolean  // 头部工具栏的类型。'classic': 默认经典模式;'grid': 两行网格模式;'collapsed': 紧凑模式;'simple':不分组模式  ribbonType?: RibbonType  // 是否显示右键菜单  contextMenu?: boolean  // 是否禁用自动聚焦  disableAutoFocus?: true  // 依赖注入的覆盖配置  override?: DependencyOverride  // 菜单配置  menu?: MenuConfig}

其中,menu 配置项可以用于简单地设置某些特定菜单项的显示或隐藏等状态:

TypeScript
univer.registerPlugin(UniverSheetsUIPlugin, {  menu: {    'sheet.command.set-range-bold': {      hidden: true,    },    'sheet.command.set-range-italic': {      hidden: true,      disabled: true,    },  },})

这里的 'sheet.command.set-range-bold''sheet.command.set-range-italic' 是命令的名称,表示对应的菜单项。可参考下方的 菜单项 ID 列表

参考:@univerjs/ui

@univerjs/docs

本插件是 Univer Docs 的核心插件。其提供了 UniverDocsPlugin 插件。

参考:@univerjs/docs

@univerjs/docs-ui

本插件是 Univer Docs 的 UI 插件,包含了文档编辑器的 UI 组件和交互。其提供了 UniverDocsUIPlugin 插件。

参考:@univerjs/docs-ui

@univerjs/sheets

本插件是 Univer Sheets 的核心插件,提供了电子表格编辑器的核心功能。其提供了 UniverSheetsPlugin 插件。

UniverSheetsPlugin 提供了一些配置项,可用于电子表格编辑器的配置。

TypeScript
interface IUniverSheetsConfig {  // 如果行样式和列样式都设置了,行样式是否优先于列样式  isRowStylePrecedeColumnStyle?: boolean  // 自动高度是否适用于合并单元格  autoHeightForMergedCells?: boolean  /**   * 是否将冻结状态同步到实时协作中的其他用户。   * @default true   */  freezeSync?: boolean}

参考:@univerjs/sheets

@univerjs/sheets-ui

本插件是 Univer Sheets 的 UI 插件,包含了电子表格编辑器的 UI 组件和交互。其提供了 UniverSheetsUIPlugin 插件。

UniverSheetsUIPlugin 提供了一些配置项,可用于电子表格编辑器的 UI 配置。

TypeScript
interface IUniverSheetsUIConfig {  // 是否显示底部。  footer?:    | false    | {        // Sheet bar 是子表管理器,包括添加/切换/删除子表。        sheetBar?: boolean        // 统计栏包括当前选区的统计信息,如计数、总和、平均值等。        statisticBar?: boolean        // 在底部的菜单,包括高亮、网格线等。        menus?: boolean        // 底部的缩放滑块。        zoomSlider?: boolean        /**         * 工作表栏中“添加工作表”按钮的配置。         */        addSheetButtonConfig?: {          /**           * 是否显示工作表栏中的“添加工作表”按钮。           * 当 `footer` 或 `footer.sheetBar` 为 false 时,此配置将不起作用,因为工作表栏将不会被渲染。           * @default true           */          show?: boolean          /**           * 新建工作表的默认行数。           * @default 1000           */          defaultRowCount?: number          /**           * 新建工作表的默认列数。           * @default 20           */          defaultColumnCount?: number        }      }  // 是否显示公式栏  formulaBar?: boolean  clipboardConfig?: {    // 在粘贴操作后是否显示粘贴选项按钮    hidePasteOptions?: boolean  }  // 滚动条配置  scrollConfig?: IScrollBarProps  /**   * 权限保护范围阴影显示策略。   * - true 或 'always':显示所有受保护范围的阴影(默认行为)   * - 'non-editable':仅显示无法编辑的范围的阴影(编辑权限为 false)   * - 'non-viewable':仅显示无法查看的范围的阴影(查看权限为 false)   * - false 或 'none':从不显示受保护范围的阴影   * @default true   */  protectedRangeShadow?: boolean | 'always' | 'non-editable' | 'non-viewable' | 'none'  // 是否禁用强制字符串警告。  disableForceStringAlert?: boolean  // 是否禁用强制字符串标记。  disableForceStringMark?: boolean}

参考:@univerjs/sheets-ui

工具栏布局与 RibbonType

通过配置 IUniverSheetsCorePresetConfigIUniverUIConfigribbonType 属性,可以设置工具栏的布局。

ribbonType 支持设置为以下四种模式:

  • classic:默认经典模式,分组在上方,工具栏平铺在下方,适合习惯传统布局的用户。
  • grid:网格模式,保留顶部标签页,下方各工具分组以两行网格排列,适合需要同时展示更多工具的桌面布局。
  • collapsed:紧凑模式,分组与工具栏平铺在同一行,适合垂直屏幕空间有限的场景。
  • simple:不分组模式,将所有工具放在一个平铺的列表中,适合熟悉工具栏功能的用户。
你可以通过菜单项 DOM 元素上的 data-u-command 属性来获取菜单项的 ID。

工具栏菜单项

菜单项 ID菜单项名称
univer.command.undo撤销
univer.command.redo重做
sheet.command.set-once-format-painter格式刷
sheet.command.set-range-bold加粗
sheet.command.set-range-italic斜体
sheet.command.set-range-underline下划线
sheet.command.set-range-stroke删除线
sheet.command.set-range-font-family字体
sheet.command.set-range-fontsize字号
sheet.command.set-range-text-color文本颜色
sheet.command.set-background-color单元格颜色
sheet.command.set-border-basic边框
sheet.command.set-horizontal-text-align水平对齐
sheet.command.set-vertical-text-align垂直对齐
sheet.command.set-text-wrap文本换行
sheet.command.set-text-rotation文本旋转
sheet.command.add-worksheet-merge合并单元格
sheet.command.add-worksheet-merge-all合并单元格 - 全部合并
sheet.command.add-worksheet-merge-vertical合并单元格 - 垂直合并
sheet.command.add-worksheet-merge-horizontal合并单元格 - 水平合并
sheet.command.remove-worksheet-merge合并单元格 - 取消合并
sheet.operation.open.conditional.formatting.panel条件格式
formula-ui.operation.insert-function函数
formula-ui.operation.more-functions函数 - 更多函数
sheet.menu.sheets-sort排序
sheet.command.sort-range-asc排序 - 当前区域升序
sheet.command.sort-range-asc-ext排序 - 拓展区域升序
sheet.command.sort-range-desc排序 - 当前区域降序
sheet.command.sort-range-desc-ext排序 - 拓展区域降序
sheet.command.sort-range-custom排序 - 自定义排序
sheet.menu.image图片
sheet.command.insert-float-image图片 - 浮动图片
sheet.command.insert-cell-image图片 - 单元格图片
sheet.command.numfmt.set.currency货币
sheet.command.numfmt.add.decimal.command增加小数位
sheet.command.numfmt.subtract.decimal.command减少小数位
sheet.command.numfmt.set.percent百分比
sheet.operation.open.numfmt.panel数字格式
sheet.menu.data-validation数据验证
data-validation.operation.open-validation-panel数据验证 - 管理数据验证
data-validation.command.addRuleAndOpen数据验证 - 新建规则
sheet.command.smart-toggle-filter筛选
sheet.command.clear-filter-criteria筛选 - 清除筛选条件
sheet.command.re-calc-filter筛选 - 重新计算
sheet.operation.open-pivot-table-range-selector-panel数据透视表
sheet.menu.print打印
sheet.operation.print-open打印 - 打印
sheet.operation.open-print-grid-sidebar打印 - 打印布局
data-connector.operation.sidebar数据连接器
sheets-exchange-client.operation.exchange文件
exchange-client.operation.import-xlsx文件 - 打开(文件)
exchange-client.operation.export-xlsx文件 - 另存为
sheet.command.menu-insert-chart插入图表
sheet.command.add-range-protection-from-toolbar保护
univer.operation.toggle-edit-history历史记录
sheet.operation.open-sparkline-selector迷你图
sheet.operation.toggle-comment-panel评论管理
sheet.operation.insert-hyper-link-toolbar插入链接
ui.operation.open-find-dialog查找替换
base-ui.operation.toggle-shortcut-panel打开收起快捷键面板
sheet.toolbar.text-to-number文本转数字

右键菜单项

菜单项 ID菜单项名称
sheet.command.copy复制
sheet.command.cut剪切
sheet.command.paste粘贴
sheet.menu.copy-special选择性复制
sheet.command.copy-formula-only选择性复制 - 仅复制公式
sheet.menu.paste-special选择性粘贴
sheet.command.paste-values选择性粘贴 - 仅粘贴值
sheet.command.paste-format选择性粘贴 - 仅粘贴格式
sheet.command.paste-col-width选择性粘贴 - 仅粘贴列宽
sheet.command.paste-besides-border选择性粘贴 - 仅粘贴边框以外内容
sheet.command.paste-formula选择性粘贴 - 仅粘贴公式
sheet.menu.clear-selection清除
sheet.command.clear-selection-content清除 - 清除内容
sheet.command.clear-selection-format清除 - 清除格式
sheet.command.clear-selection-all清除 - 清除全部
sheet.contextMenu.text-to-number文本转数字
sheet.menu.cell-insert插入
sheet.command.insert-row-before插入 - 在上方插入行
sheet.command.insert-col-before插入 - 在左侧插入列
sheet.command.insert-range-move-right-confirm插入 - 右移
sheet.command.insert-range-move-down-confirm插入 - 下移
sheet.menu.delete删除
sheet.command.remove-row-confirm删除选中行
sheet.command.remove-col-confirm删除选中列
sheet.command.delete-range-move-left-confirm删除 - 左移
sheet.command.delete-range-move-up-confirm删除 - 上移
sheet.menu.sheet-frozen冻结
sheet.header-menu.sheet-frozen冻结(行列标题右键菜单项)
sheet.command.set-selection-frozen冻结 - 冻结
sheet.command.set-row-frozen冻结 - 冻结行
sheet.command.set-col-frozen冻结 - 冻结列
sheet.command.cancel-frozen冻结 - 取消冻结
sheet.contextMenu.permission保护行列
sheet.command.add-range-protection-from-context-menu保护行列 - 新增保护范围
sheet.command.set-range-protection-from-context-menu保护行列 - 设置保护范围
sheet.command.delete-range-protection-from-context-menu保护行列 - 移除保护范围
sheet.command.view-sheet-permission-from-context-menu保护行列 - 查看所有保护范围
sheet.menu.sheets-sort-ctx排序
sheet.command.sort-range-asc-ctx排序 - 当前区域升序
sheet.command.sort-range-asc-ext-ctx排序 - 拓展区域升序
sheet.command.sort-range-desc-ctx排序 - 当前区域降序
sheet.command.sort-range-desc-ext-ctx排序 - 拓展区域降序
sheet.command.sort-range-custom-ctx排序 - 自定义排序
sheet.operation.show-comment-modal添加评论
sheet.operation.insert-hyper-link添加链接
sheet.operation.screenshot复制为截图

右键菜单项 - 行标题

菜单项 ID菜单项名称
sheet.command.insert-multi-rows-above在上方插入行
sheet.command.insert-multi-rows-after在下方插入行
sheet.command.hide-row-confirm隐藏选中行
sheet.command.set-selected-rows-visible显示隐藏行
sheet.command.set-row-height行高
sheet.command.set-row-is-auto-height适合数据

右键菜单项 - 列标题

菜单项 ID菜单项名称
sheet.command.insert-multi-cols-before在左侧插入列
sheet.command.insert-multi-cols-right在右侧插入列
sheet.command.hide-col-confirm隐藏选中列
sheet.command.set-selected-cols-visible显示隐藏列
sheet.command.set-worksheet-col-width列宽
sheet.command.set-col-auto-width适合数据

你觉得这篇文档如何?

© 2026 DreamNum Co., Ltd.