Descripción general de la hoja de cálculo Angular

El componente Angular Spreadsheet (visor de Excel) es liviano, tiene muchas funciones y cuenta con todas las opciones necesarias para operar, visualizar y editar todo tipo de datos de hojas de cálculo: científicos, comerciales, financieros y más. Toda la información se puede presentar en un formato tabular que resulta intuitivo y fácil de navegar a través de celdas, paneles y hojas de trabajo. IgxSpreadsheetComponent se complementa con una interfaz flexible similar a la de Excel, gráficos detallados y funciones como activación, edición de celdas, formato condicional, estilo, selección y portapapeles.

Angular Spreadsheet Example

Functionality

Características

Al igual que en la hoja de cálculo de Excel, puede aplicar funciones de filtrado, clasificación, mover celdas, personalización en términos de color de celdas, atajos de teclado y agregar la capacidad de incluso calcular fórmulas.

Spreadsheet Usage

Actuación

La hoja de cálculo es compatible con todos los navegadores modernos y está optimizada para modelos de hojas de cálculo complejos y voluminosos, al tiempo que garantiza una funcionalidad y simplicidad impecables.

Diseño flexible y fácil personalización

Puede seleccionar, agregar, eliminar, activar o desactivar fácilmente las funciones que desee y configurar hojas React en un instante para que todo responda a las necesidades de los usuarios finales. También hay bibliotecas configurables, alternativas de estilo y formato, opciones de visibilidad y muchos temas para elegir.

Cómoda interfaz tipo Excel

Al igual que operar datos en Excel, nuestro componente de hoja de cálculo ofrece todas las operaciones conocidas del portapapeles de Excel: copiar, pegar, cortar. No necesitarás formación adicional ni nuevas habilidades para empezar a utilizarlo de inmediato. También viene con opciones para ordenar, navegación completa con el teclado, valores y fórmulas, arrastrar celdas, editar columnas y filas, filtrar, formatear números y cambiar el tamaño. El motor de cálculo rápido e inteligente impulsa incluso las estimaciones más complejas. Sin dependencias de Excel.

Operaciones de datos

Recopile y administre datos científicos, comerciales, de ingeniería, financieros y educativos. Prepare y cree análisis, cuadrículas avanzadas, informes, formularios de entrada de datos, elaboración de presupuestos, escenarios de previsión y hojas de cálculo personalizadas. Todo esto gracias a la API integral.

Procesamiento de datos rápido y seguro

Con nuestra hoja de cálculo, el procesamiento de datos es 100% seguro y protegido...

Importación y exportación de Excel y CSV

Con la funcionalidad incorporada de importación/exportación de Excel, puede cargar y abrir instantáneamente documentos de Excel y verlos a pedido, agregar cambios y guardarlos. Además, exporte sin esfuerzo sus hojas de cálculo Excel .xlsx completas.

Dependencies

Al instalar el componente de hoja de cálculo Angular, también se deben instalar el paquete principal y de Excel.

npm install --save igniteui-angular-core
npm install --save igniteui-angular-excel
npm install --save igniteui-angular-spreadsheet

Component Modules

El IgxSpreadsheetComponent requiere los siguientes módulos:

import { IgxExcelModule } from 'igniteui-angular-excel';
import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet';

@NgModule({
    imports: [
        // ...
        IgxExcelModule,
        IgxSpreadsheetModule,
        // ...
    ]
})
export class AppModule {}

Usage

Ahora que se importa el módulo de hoja de cálculo Angular, lo siguiente es la configuración básica de la hoja de cálculo.

<igx-spreadsheet #spreadsheet height="500px" width="100%">
</igx-spreadsheet>

[!Note]

In the following code snippet, an external ExcelUtility class is used to save and load a workbook.

A continuación se muestra cómo cargar un libro de trabajo en la hoja de cálculo Angular.

import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
import { ExcelUtility } from 'ExcelUtility';

// ...

@ViewChild("spreadsheet", { read: IgxSpreadsheetComponent })
public spreadsheet: IgxSpreadsheetComponent;

ngOnInit() {
    const excelFile = '../../assets/Sample1.xlsx';
    ExcelUtility.loadFromUrl(excelFile).then((w) => {
      this.spreadsheet.workbook = w;
    });
}