Características principales

Las características principales de Univer Sheets incluyen un editor de hojas de cálculo, un motor de fórmulas, un motor de renderizado, un motor de formato de números, un sistema de diseño y una biblioteca de componentes de interfaz de usuario. Juntos, forman una poderosa plataforma para manejar hojas de cálculo, admitiendo varios formatos y operaciones complejas.

Características

Las características principales de Univer Sheets incluyen:

• Representación de hojas de cálculo: admite la representación de Univer Sheets, incluido el cursor y el dibujo de selección.
• Estilo de celda: permite aplicar estilo a las celdas en la hoja de cálculo, incluida la fuente, el color, los bordes y la alineación.
• Cálculo de fórmulas: admite agregar y calcular fórmulas en la hoja de cálculo, cubriendo casi todas las funciones de Excel, incluidas funciones matemáticas, estadísticas, de texto y de fecha.
• Formato de números: permite el formato de números en la hoja de cálculo, incluidos formatos de moneda, porcentaje, fecha, etc.
• Cuadrículas y Paneles congelados: admite la visualización de líneas de cuadrícula y paneles congelados, lo que facilita a los usuarios ver y editar grandes conjuntos de datos.
• Estilos predeterminados: permite configurar estilos predeterminados para la hoja de cálculo, incluida la fuente, el tamaño, el color predeterminados, etc.
• Sistema de complementos: admite un sistema de complementos que permite complementos personalizados, como complementos de fórmulas, complementos de imágenes, complementos de gráficos, etc. Esta es también una de las capacidades arquitectónicas principales de Univer.

Modo de complemento

Instalación

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

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

yarn 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

bun 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

Uso

import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import DesignEnUS from '@univerjs/design/locale/en-US'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US'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 SheetsFormulaUIEnUS from '@univerjs/sheets-formula-ui/locale/en-US'import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt'import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui'import SheetsNumfmtUIEnUS from '@univerjs/sheets-numfmt-ui/locale/en-US'import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'import SheetsUIEnUS from '@univerjs/sheets-ui/locale/en-US'import SheetsEnUS from '@univerjs/sheets/locale/en-US'import { UniverUIPlugin } from '@univerjs/ui'import UIEnUS from '@univerjs/ui/locale/en-US'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.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DesignEnUS,      UIEnUS,      DocsUIEnUS,      SheetsEnUS,      SheetsUIEnUS,      SheetsFormulaUIEnUS,      SheetsNumfmtUIEnUS,    ),  },})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)

Complementos y configuración

@univerjs/core

Este complemento es la biblioteca principal de Univer y proporciona funcionalidades básicas como la creación de instancias, temas e idiomas de Univer.

interface UniverParameter {  // Univer instance theme, default is `defaultTheme`  theme: IStyleSheet  // Whether to use dark mode, default is false  darkMode?: boolean  // The locale of the Univer instance  locale: LocaleType  // The locale objects to use, with keys as locale types and values as corresponding locale objects  locales: ILocales  // The log level of the Univer instance  logLevel?: LogLevel}

Referencia: Univer

@univerjs/engine-render

Este complemento es el motor de renderizado de Univer, responsable del renderizado, las barras de desplazamiento, el cursor y el renderizado de selecciones. Proporciona el UniverRenderEnginePlugin.

Referencia: @univerjs/engine-render

@univerjs/engine-formula

Este complemento es el motor de fórmulas de Univer, responsable de calcular y procesar fórmulas. Proporciona UniverFormulaEnginePlugin.

Referencia: @univerjs/engine-formula

@univerjs/design

Este complemento es el sistema de diseño de Univer y proporciona todos los componentes y estilos básicos.

Ver: UI Capítulo

@univerjs/ui

Este complemento es la base de la interfaz de usuario de Univer. Proporciona el UniverUIPlugin.

El UniverUIPlugin proporciona algunas opciones de configuración que se pueden usar para la configuración de diseño básica.

interface IUniverUIConfig {  // Container element, can be a string or a DOM element  container?: string | HTMLElement  // Whether to show the header  header?: boolean  // Whether to show the header toolbar  toolbar?: boolean  // The type of the header toolbar. 'classic': default classic mode; 'grid': two-row grid mode; 'collapsed': compact mode; 'simple': ungrouped mode  ribbonType?: RibbonType  // Whether to show the context menu  contextMenu?: boolean  // Whether to disable auto focus  disableAutoFocus?: true  // Dependency injection override configuration  override?: DependencyOverride  // Menu configuration  menu?: MenuConfig}

La opción de configuración menu se puede usar para simplemente establecer la visualización o el estado oculto de ciertos elementos de menú específicos:

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

Aquí, 'sheet.command.set-range-bold' y 'sheet.command.set-range-italic' son los nombres de los comandos, indicando los elementos del menú correspondientes. Puede consultar la Lista de ID de elementos del menú a continuación.

Referencia: @univerjs/ui

@univerjs/docs

Este complemento es el complemento principal de Univer Docs. Proporciona UniverDocsPlugin.

Referencia: @univerjs/docs

@univerjs/docs-ui

Este complemento es el complemento de interfaz de usuario de Univer Docs, que incluye componentes de interfaz de usuario e interacciones para el editor de documentos. Proporciona UniverDocsUIPlugin.

Referencia: @univerjs/docs-ui

@univerjs/sheets

Este complemento es el complemento principal de Univer Sheets y proporciona las funcionalidades principales del editor de hojas de cálculo. Proporciona UniverSheetsPlugin.

UniverSheetsPlugin proporciona algunas opciones de configuración que se pueden usar para la configuración del editor de hojas de cálculo.

interface IUniverSheetsConfig {  // If both row style and column style are set, whether row style precedes column style  isRowStylePrecedeColumnStyle?: boolean  // Whether auto height applies to merged cells  autoHeightForMergedCells?: boolean  /**   * Whether synchronize the frozen state to other users in real-time collaboration.   * @default true   */  freezeSync?: boolean}

Referencia: @univerjs/sheets

@univerjs/sheets-ui

Este complemento es el complemento de interfaz de usuario de Univer Sheets. que incluye componentes de interfaz de usuario e interacciones para el editor de hojas de cálculo. Proporciona el UniverSheetsUIPlugin.

UniverSheetsUIPlugin proporciona algunas opciones de configuración que se pueden usar para la configuración de la interfaz de usuario del editor de hojas de cálculo.

interface IUniverSheetsUIConfig {  // Whether to show the footer.  footer?:    | false    | {        // The sheet bar is the sub-sheet manager, including adding/switching/deleting sub-sheets.        sheetBar?: boolean        // The statistic bar includes statistics of the current selection, such as count, sum, average, etc.        statisticBar?: boolean        // The bottom menu includes options like highlight, gridlines, etc.        menus?: boolean        // The zoom slider at the bottom.        zoomSlider?: boolean        /**         * The config of the add sheet button in the sheet bar.         */        addSheetButtonConfig?: {          /**           * Whether to show the add sheet button in the sheet bar.           * When `footer` or `footer.sheetBar` is false, this config will not work because the sheet bar will not be rendered.           * @default true           */          show?: boolean          /**           * The default row count of the new sheet created by the add sheet button.           * @default 1000           */          defaultRowCount?: number          /**           * The default column count of the new sheet created by the add sheet button.           * @default 20           */          defaultColumnCount?: number        }      }  // Whether to show the formula bar  formulaBar?: boolean  clipboardConfig?: {    // Whether to show the paste options button after paste operation    hidePasteOptions?: boolean  }  // The configuration for the scroll bar  scrollConfig?: IScrollBarProps  /**   * Strategy for showing the protected range shadow.   * - true or 'always': Show shadow for all protected ranges (default behavior)   * - 'non-editable': Only show shadow for ranges that cannot be edited (Edit permission is false)   * - 'non-viewable': Only show shadow for ranges that cannot be viewed (View permission is false)   * - false or 'none': Never show shadow for protected ranges   * @default true   */  protectedRangeShadow?: boolean | 'always' | 'non-editable' | 'non-viewable' | 'none'  // Whether to disable the force string alert.  disableForceStringAlert?: boolean  // Whether to disable the force string mark.  disableForceStringMark?: boolean}

Referencia: @univerjs/sheets-ui

Compatibilidad móvil

Configure primero el editor móvil. En la inicialización en modo plugin de esta página, sustituya los registros de escritorio siguientes por las exportaciones móviles de los mismos paquetes antes de abrir un documento. Conserve modelos, estilos, traducciones e importaciones Facade; no registre ambas variantes.

Modo preestablecido

Instalación

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

npm install @univerjs/presets @univerjs/preset-sheets-core

yarn add @univerjs/presets @univerjs/preset-sheets-core

bun add @univerjs/presets @univerjs/preset-sheets-core

Uso

import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(UniverPresetSheetsCoreEnUS),  },  presets: [UniverSheetsCorePreset()],})univerAPI.createWorkbook({})

Preajustes y configuración

@univerjs/presets

Este ajuste preestablecido proporciona el método createUniver para crear una aplicación Univer y expone todos los métodos y objetos de @univerjs/core y @univerjs/design.

El El método createUniver acepta un objeto de configuración que incluye opciones de tema, idioma, ajustes preestablecidos, etc. Devuelve una instancia Univer univer y una instancia FUniver univerAPI para llamar a la API de Facade.

interface CreateUniverParameter {  // Univer instance theme, default is `defaultTheme`  theme: IStyleSheet  // Whether to use dark mode, default is false  darkMode?: boolean  // The locale of the Univer instance  locale: LocaleType  region?: LocaleType  // The locale objects to use, with keys as locale types and values as corresponding locale objects  locales: ILocales  // The log level of the Univer instance  logLevel?: LogLevel  // The list of presets to use.  presets: IPresets[]  // The list of plugins to use.  plugins: IPlugins[]}

Referencia: createUniver

@univerjs/preset-sheets-core

Este ajuste preestablecido es el ajuste preestablecido principal de Univer Sheets, que incluye las funciones principales necesarias para la edición de documentos, motor de fórmulas, motor de renderizado, etc.

interface IUniverSheetsCorePresetConfig {  // Container element, can be a string or a DOM element  container?: string | HTMLElement  // Whether to show the header  header?: boolean  // Whether to show the header toolbar  toolbar?: boolean  // The type of the header toolbar. 'classic': default classic mode; 'grid': two-row grid mode; 'collapsed': compact mode; 'simple': ungrouped mode  ribbonType?: RibbonType  // Whether to show the footer  footer?:    | false    | {        // Sheet bar is the sub-sheet manager, including adding/switching/deleting sub-sheets.        sheetBar?: boolean        // Statistic bar includes statistics of the current selection, such as count, sum, average, etc.        statisticBar?: boolean        // The bottom menu includes options like highlight, gridlines, etc.        menus?: boolean        // The zoom slider at the bottom.        zoomSlider?: boolean        /**         * The config of the add sheet button in the sheet bar.         */        addSheetButtonConfig?: {          /**           * Whether to show the add sheet button in the sheet bar.           * When `footer` or `footer.sheetBar` is false, this config will not work because the sheet bar will not be rendered.           * @default true           */          show?: boolean          /**           * The default row count of the new sheet created by the add sheet button.           * @default 1000           */          defaultRowCount?: number          /**           * The default column count of the new sheet created by the add sheet button.           * @default 20           */          defaultColumnCount?: number        }      }  // Whether to show the context menu  contextMenu?: boolean  // Whether to disable auto focus  disableAutoFocus?: true  // Menu configuration  menu?: MenuConfig  sheets?: {    // If both row style and column style are set, whether row style precedes column style    isRowStylePrecedeColumnStyle?: boolean    // Whether auto height applies to merged cells    autoHeightForMergedCells?: boolean    /**     * Whether synchronize the frozen state to other users in real-time collaboration.     * @default true     */    freezeSync?: boolean    clipboardConfig?: {      // Whether to show the paste options button after paste operation      hidePasteOptions?: boolean    }    // The configuration for the scroll bar    scrollConfig?: IScrollBarProps    /**     * Strategy for showing the protected range shadow.     * - true or 'always': Show shadow for all protected ranges (default behavior)     * - 'non-editable': Only show shadow for ranges that cannot be edited (Edit permission is false)     * - 'non-viewable': Only show shadow for ranges that cannot be viewed (View permission is false)     * - false or 'none': Never show shadow for protected ranges     * @default true     */    protectedRangeShadow?: boolean | 'always' | 'non-editable' | 'non-viewable' | 'none'    // Whether to disable the force string alert.    disableForceStringAlert?: boolean    // Whether to disable the force string mark.    disableForceStringMark?: boolean  }  // ... More configuration options}

La opción de configuración menu se puede usar para establecer simplemente la visualización o el estado oculto de ciertos elementos de menú específicos:

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

Aquí, 'sheet.command.set-range-bold' y 'sheet.command.set-range-italic' son los nombres de los comandos, que indican el menú correspondiente artículos. Puede consultar la Lista de ID de elementos del menú a continuación.

Referencia: @univerjs/preset-sheets-core

Diseño de la barra de herramientas y RibbonType

Configurando el ribbonType propiedad en IUniverSheetsCorePresetConfig o IUniverUIConfig, puede configurar el diseño de la barra de herramientas.

ribbonType admite los siguientes cuatro modos:

• classic: modo clásico predeterminado, con grupos en la parte superior y la barra de herramientas dispuesta debajo, adecuado para los usuarios acostumbrado a los diseños tradicionales.
• grid: modo de cuadrícula, que conserva las pestañas en la parte superior y organiza debajo las herramientas de cada grupo en una cuadrícula de dos filas, adecuado para diseños de escritorio que necesitan mostrar más herramientas a la vez.
• collapsed: modo compacto, donde los grupos y la barra de herramientas se colocan en la misma fila, adecuado para escenarios con espacio de pantalla vertical limitado.
• simple: modo desagrupado, donde todas las herramientas se colocan en una lista plana, adecuado para usuarios familiarizados con las funciones de la barra de herramientas.

Orden de menús y disposición en cuadrícula

La configuración inicial y univerAPI.updateMenuConfig() utilizan la misma estructura menu. Las claves identifican una pestaña del Ribbon (por ejemplo, ribbon.insert), un grupo (por ejemplo, ribbon.start.format) o un elemento de menú.

order ordena de menor a mayor los elementos del mismo nivel: pestañas, grupos dentro de una pestaña y elementos dentro de un grupo o submenú. No mueve un elemento a otro grupo. También puede usar RibbonPosition y las enumeraciones de grupos exportadas por @univerjs/ui.

Configuración inicial

Elija su modo e incorpore estas opciones a la inicialización existente. Conserve los demás complementos y la configuración de idioma, tema y contenedor; no registre dos veces el mismo complemento.

import type { MenuConfig } from '@univerjs/ui'const menu: MenuConfig = {  'ribbon.insert': { order: -1 },  'ribbon.start.format': { order: -1 },  'sheet.command.set-range-font-family': {    order: 0,    gridLayout: { row: 1, column: 1, width: 160 },  },}

import { UniverUIPlugin } from '@univerjs/ui'univer.registerPlugin(UniverUIPlugin, {  ribbonType: 'grid',  menu,})

import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import { createUniver } from '@univerjs/presets'const { univerAPI } = createUniver({  presets: [    UniverSheetsCorePreset({      ribbonType: 'grid',      menu,    }),  ],})

Actualizaciones en tiempo de ejecución

La Facade pública combina los cambios y actualiza la interfaz inmediatamente. Las propiedades omitidas conservan su configuración anterior o los valores predeterminados del esquema. La configuración también se aplica a los menús registrados posteriormente. En modo de complemento, importe primero @univerjs/ui/facade.

import '@univerjs/ui/facade'univerAPI.updateMenuConfig({  'sheet.command.set-range-bold': {    order: 0,    gridLayout: { row: 2, column: 2 },  },  'sheet.command.set-range-italic': {    gridLayout: { row: 2, column: 1 },  },})

gridLayout solo se aplica a ribbonType: 'grid'. Cada grupo tiene dos filas; row y column comienzan en 1. Las coordenadas explícitas determinan la posición, por lo que cambiar solo order no mueve un botón ya posicionado. Al intercambiar posiciones, actualice ambos botones para evitar solapamientos. Los campos opcionales son rowSpan, columnSpan, showLabel, width e iconSize; los tamaños se expresan en píxeles. Consulte IRibbonGridLayout para conocer las restricciones y los valores predeterminados.

Posición de un menú personalizado

createMenu() y createSubmenu() también aceptan order y gridLayout. Para un submenú, estas opciones controlan su activador en el Ribbon, no el contenido del menú desplegable. Este ejemplo añade un botón en la tercera columna del grupo Historial:

univerAPI  .createMenu({    id: 'custom-action',    title: 'Custom action',    action: () => console.log('Custom action clicked'),    order: 4,    gridLayout: { row: 1, column: 3, showLabel: true, width: 96 },  })  .appendTo('ribbon.start.history')

Lista de ID de elementos del menú

Elementos del menú de la barra de herramientas

Elementos del menú contextual

Elementos del menú contextual: encabezado de fila

Elementos del menú contextual: encabezado de columna