核心功能
Univer Sheets 的核心功能包含了电子表格编辑器、公式引擎、渲染引擎、数字格式化引擎、设计系统和 UI 组件库等。它们共同构成了一个强大的电子表格处理平台,支持多种电子表格格式和复杂的电子表格操作。
特性
Univer Sheets 的核心功能包括:
- 电子表格渲染:支持 Univer Sheets 的渲染和光标、选区的绘制。
- 单元格样式:支持对电子表格中的单元格进行样式设置,包括字体、颜色、边框、对齐等。
- 公式计算:支持在电子表格中添加和计算公式,支持几乎所有的 Excel 公式,包括数学、统计、文本、日期等函数。
- 数字格式化:支持对电子表格中的数字进行格式化,包括货币、百分比、日期等格式。
- 网格线和冻结窗格:支持显示网格线和冻结窗格功能,方便用户查看和编辑大数据量的电子表格。
- 默认样式:支持对电子表格的默认样式进行设置,包括默认字体、字号、颜色等。
- 插件系统:支持插件系统,可以自定义插件,这也是 Univer 核心架构能力之一。
预设模式
安装
pnpm add @univerjs/presets @univerjs/preset-sheets-corenpm install @univerjs/presets @univerjs/preset-sheets-coreyarn add @univerjs/presets @univerjs/preset-sheets-corebun add @univerjs/presets @univerjs/preset-sheets-core使用
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。
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 的核心预设,包含了文档编辑器、公式引擎、渲染引擎等电子文档必要的核心功能。
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 配置项可以用于简单地设置某些特定菜单项的显示或隐藏等状态:
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
插件模式
安装
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-uinpm install @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-uiyarn 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-uibun 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使用
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 实例、主题、语言等基础功能。
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-formula
本插件是 Univer 的公式引擎,负责公式的计算和处理。其提供了 UniverFormulaEnginePlugin 插件。
@univerjs/design
本插件是 Univer 的设计系统,提供了所有的基础组件和样式。
详见: UI 章节
@univerjs/ui
本插件是 Univer 的 UI 基座。其提供了 UniverUIPlugin 插件。
UniverUIPlugin 提供了一些配置项,可用于基础布局的配置。
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 配置项可以用于简单地设置某些特定菜单项的显示或隐藏等状态:
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-ui
本插件是 Univer Docs 的 UI 插件,包含了文档编辑器的 UI 组件和交互。其提供了 UniverDocsUIPlugin 插件。
@univerjs/sheets
本插件是 Univer Sheets 的核心插件,提供了电子表格编辑器的核心功能。其提供了 UniverSheetsPlugin 插件。
UniverSheetsPlugin 提供了一些配置项,可用于电子表格编辑器的配置。
interface IUniverSheetsConfig { // 如果行样式和列样式都设置了,行样式是否优先于列样式 isRowStylePrecedeColumnStyle?: boolean // 自动高度是否适用于合并单元格 autoHeightForMergedCells?: boolean /** * 是否将冻结状态同步到实时协作中的其他用户。 * @default true */ freezeSync?: boolean}@univerjs/sheets-ui
本插件是 Univer Sheets 的 UI 插件,包含了电子表格编辑器的 UI 组件和交互。其提供了 UniverSheetsUIPlugin 插件。
UniverSheetsUIPlugin 提供了一些配置项,可用于电子表格编辑器的 UI 配置。
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}工具栏布局与 RibbonType
通过配置 IUniverSheetsCorePresetConfig 或 IUniverUIConfig 的 ribbonType 属性,可以设置工具栏的布局。
ribbonType 支持设置为以下四种模式:
classic:默认经典模式,分组在上方,工具栏平铺在下方,适合习惯传统布局的用户。grid:网格模式,保留顶部标签页,下方各工具分组以两行网格排列,适合需要同时展示更多工具的桌面布局。collapsed:紧凑模式,分组与工具栏平铺在同一行,适合垂直屏幕空间有限的场景。simple:不分组模式,将所有工具放在一个平铺的列表中,适合熟悉工具栏功能的用户。
菜单项 ID 列表
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 | 适合数据 |
你觉得这篇文档如何?