Skip to Content
🎉 Univer 0.8.3 版本已发布。查看详情 →
GuidesUniver Sheets功能核心功能核心功能

核心功能

Facade API可付费升级需要 Univer 服务端Univer on Node.jsPreset
✅--✅UniverSheetsCorePreset

核心功能是实现电子表格的基础功能，包含了 Univer Sheets 的核心功能，如创建工作簿、单元格编辑、单元格选择、公式、数字格式等。

该功能包含以下插件包：

Presets 安装

npm install @univerjs/presets
import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN';
 
import '@univerjs/presets/lib/styles/preset-sheets-core.css'
 
const { univerAPI } = createUniver({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: merge(
      {},
      UniverPresetSheetsCoreZhCN
    ),
  },
  theme: defaultTheme,
  presets: [
    UniverSheetsCorePreset(),
  ]
});

配置

createUniver

const { univerAPI } = createUniver({
  // Univer 实例的主题，默认使用默认主题。
  theme: IStyleSheet;
  /**
   * 是否使用暗黑模式。
   * @version 0.8.0+
   */
  darkMode?: boolean;
  // Univer 实例的语言环境。
  locale: LocaleType;
  // 要使用的语言环境对象，键为语言环境类型，值为对应的语言环境对象。
  locales: ILocales;
  // Univer 实例的日志级别。
  logLevel?: LogLevel;
  // 要使用的预设包列表。
  presets: IPresets[];
  // 要使用的插件列表。
  plugins: IPlugins[];
});

Presets 配置

插件的配置一样可以直接传入对应的 preset 中使用， 以常见的 @univerjs/ui 的配置举例：

const { univerAPI } = createUniver({
  presets: [
    UniverSheetsCorePreset({
      // 容器元素，可以是字符串或者 DOM 元素。
      container?: string | HTMLElement;
      // 是否显示头部。
      header?: boolean;
      /**
       * 是否显示头部工具栏。
       * @version 0.2.0+
       */
      toolbar?: boolean;
      /**
       * 头部工具栏的类型。default: 分组模式；simple：不分组模式。
       * @version 0.8.1+
       */
      ribbonType?: RibbonType;
      // 是否显示底部。
      footer?: false | {
        // Sheet bar 是子表管理器，包括添加/切换/删除子表。
        sheetBar?: boolean;
        // 统计栏包括当前选区的统计信息，如计数、总和、平均值等。
        statisticBar?: boolean;
        // 在底部的菜单，包括高亮、网格线等。
        menus?: boolean;
        // 底部的缩放滑块。
        zoomSlider?: boolean;
      };
      // 是否显示右键菜单。
      contextMenu?: boolean;
      // 是否禁用自动聚焦。
      disableAutoFocus?: true;
      // 依赖注入的覆盖配置。
      override?: DependencyOverride;
      // 菜单配置
      menu?: MenuConfig;
      
      // ... 更多配置项
    }),
  ]
});

完整的配置项参考 IUniverSheetsCorePresetConfig 。

手动组合安装

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

@univerjs/core 在初始化时提供了一些配置项，可用于配置主题、国际化等。

new Univer({
  // Univer 实例的主题，默认使用默认主题。
  theme: IStyleSheet;
  /**
   * 是否使用暗黑模式。
   * @version 0.8.0+
   */
  darkMode?: boolean;
  // Univer 实例的语言环境。
  locale: LocaleType;
  // 要使用的语言环境对象，键为语言环境类型，值为对应的语言环境对象。
  locales: ILocales;
  // Univer 实例的日志级别。
  logLevel?: LogLevel;
});

完整的配置项参考 IUniverConfig 。

@univerjs/ui

@univerjs/ui 提供了一些配置项，可用于基础布局的配置。

univer.registerPlugin(UniverUIPlugin, {
  // 容器元素，可以是字符串或者 DOM 元素。
  container?: string | HTMLElement;
  // 是否显示头部。
  header?: boolean;
  /**
   * 是否显示头部工具栏。
   * @version 0.2.0+
   */
  toolbar?: boolean;
  /**
   * 头部工具栏的类型。default: 分组模式；simple：不分组模式。
   * @version 0.8.1+
   */
  ribbonType?: RibbonType;
  // 是否显示右键菜单。
  contextMenu?: boolean;
  // 是否禁用自动聚焦。
  disableAutoFocus?: true;
  // 依赖注入的覆盖配置。
  override?: DependencyOverride;
  // 菜单配置
  menu?: MenuConfig;
});

完整的配置项参考 IUniverUIConfig 。

@univerjs/sheets

univer.registerPlugin(UniverSheetsPlugin, {
  // 如果行样式和列样式都设置了，行样式是否优先于列样式
  isRowStylePrecedeColumnStyle?: boolean;
  // 自动高度是否适用于合并单元格
  autoHeightForMergedCells?: boolean;
});

完整的配置项参考 IUniverSheetsConfig 。

@univerjs/sheets-ui

univer.registerPlugin(UniverSheetsUIPlugin, {
  // 是否显示底部。
  footer?: false | {
    // Sheet bar 是子表管理器，包括添加/切换/删除子表。
    sheetBar?: boolean;
    // 统计栏包括当前选区的统计信息，如计数、总和、平均值等。
    statisticBar?: boolean;
    // 在底部的菜单，包括高亮、网格线等。
    menus?: boolean;
    // 底部的缩放滑块。
    zoomSlider?: boolean;
  };
  // 是否显示公式栏
  formulaBar?: boolean;
  clipboardConfig?: {
    // 在粘贴操作后是否显示粘贴选项按钮
    hidePasteOptions?: boolean;
  };
  // 滚动条配置
  scrollConfig?: IScrollBarProps;
  // 是否显示受保护范围的阴影。
  protectedRangeShadow?: boolean;
  // 是否禁用强制字符串警告。
  disableForceStringAlert?: boolean;
  // 是否禁用强制字符串标记。
  disableForceStringMark?: boolean;
 
  // ... 更多配置项
});

完整的配置项参考 IUniverSheetsUIConfig 。

Univer on Node.js 手动组合安装

npm install @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/docs @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-numfmt
import { LocaleType, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt';
 
import '@univerjs/engine-formula/facade';
import '@univerjs/sheets/facade';
import '@univerjs/sheets-formula/facade';
import '@univerjs/sheets-numfmt/facade';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
});
 
univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);
univer.registerPlugin(UniverDocsPlugin);
univer.registerPlugin(UniverSheetsPlugin);
univer.registerPlugin(UniverSheetsFormulaPlugin);
univer.registerPlugin(UniverSheetsNumfmtPlugin);
Last updated on
许可证基础 API