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

El componente de hoja de cálculo Angular (visor de Excel) es liviano, rico en funciones y se suministra 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 por celdas, paneles y hojas de trabajo. Se IgxSpreadsheetComponent complementa con una interfaz flexible similar a Excel, gráficos detallados y funciones como activación, edición de celdas, formato condicional, estilo, selección, portapapeles.

Angular Spreadsheet Example

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

import { saveAs } from "file-saver";
import { Workbook } from "igniteui-angular-excel";
import { WorkbookFormat } from "igniteui-angular-excel";
import { WorkbookSaveOptions } from "igniteui-angular-excel";

export class ExcelUtility {
    public static getExtension(format: WorkbookFormat) {
        switch (format) {
            case WorkbookFormat.StrictOpenXml:
            case WorkbookFormat.Excel2007:
                return ".xlsx";
            case WorkbookFormat.Excel2007MacroEnabled:
                return ".xlsm";
            case WorkbookFormat.Excel2007MacroEnabledTemplate:
                return ".xltm";
            case WorkbookFormat.Excel2007Template:
                return ".xltx";
            case WorkbookFormat.Excel97To2003:
                return ".xls";
            case WorkbookFormat.Excel97To2003Template:
                return ".xlt";
        }
    }

    public static load(file: File): Promise<Workbook> {
        return new Promise<Workbook>((resolve, reject) => {
            ExcelUtility.readFileAsUint8Array(file).then((a) => {
                Workbook.load(a, null, (w) => {
                    resolve(w);
                }, (e) => {
                    reject(e);
                });
            }, (e) => {
                reject(e);
            });
        });
    }

    public static loadFromUrl(url: string): Promise<Workbook> {
        return new Promise<Workbook>((resolve, reject) => {
            const req = new XMLHttpRequest();
            req.open("GET", url, true);
            req.responseType = "arraybuffer";
            req.onload = (d) => {
                const data = new Uint8Array(req.response);
                Workbook.load(data, null, (w) => {
                    resolve(w);
                }, (e) => {
                    reject(e);
                });
            };
            req.send();
        });
    }

    public static save(workbook: Workbook, fileNameWithoutExtension: string): Promise<string> {
        return new Promise<string>((resolve, reject) => {
            const opt = new WorkbookSaveOptions();
            opt.type = "blob";

            workbook.save(opt, (d) => {
                const fileExt = ExcelUtility.getExtension(workbook.currentFormat);
                const fileName = fileNameWithoutExtension + fileExt;
                saveAs(d as Blob, fileName);
                resolve(fileName);
            }, (e) => {
                reject(e);
            });
        });
    }

    private static readFileAsUint8Array(file: File): Promise<Uint8Array> {
        return new Promise<Uint8Array>((resolve, reject) => {
            const fr = new FileReader();
            fr.onerror = (e) => {
                reject(fr.error);
            };

            if (fr.readAsBinaryString) {
                fr.onload = (e) => {
                    const rs = (fr as any).resultString;
                    const str: string = rs != null ? rs : fr.result;
                    const result = new Uint8Array(str.length);
                    for (let i = 0; i < str.length; i++) {
                        result[i] = str.charCodeAt(i);
                    }
                    resolve(result);
                };
                fr.readAsBinaryString(file);
            } else {
                fr.onload = (e) => {
                    resolve(new Uint8Array(fr.result as ArrayBuffer));
                };
                fr.readAsArrayBuffer(file);
            }
        });
    }
}
tsコピー

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ExcelUtility } from "./ExcelUtility";
import { IgxExcelModule } from "igniteui-angular-excel";
import { IgxSpreadsheetModule } from "igniteui-angular-spreadsheet";

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxExcelModule,
    IgxSpreadsheetModule
],
  providers: [ExcelUtility],
schemas: []
})
export class AppModule {}
tsコピー

import { Component, OnInit, ViewChild } from "@angular/core";
import { IgxSpreadsheetComponent } from "igniteui-angular-spreadsheet";
import { ExcelUtility } from "./ExcelUtility";

@Component({
  standalone: false,
  selector: "app-root",
  styleUrls: ["./app.component.scss"],
  templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
  @ViewChild("spreadsheet", { read: IgxSpreadsheetComponent, static: true })
  public spreadsheet: IgxSpreadsheetComponent;

  constructor() { }

  public ngOnInit() {
      const excelFile = "https://static.infragistics.com/xplatform/excel/SalesData.xlsx"
      ExcelUtility.loadFromUrl(excelFile).then((w) => {
          this.spreadsheet.workbook = w;
      });
  }

  public openFile(input: HTMLInputElement): void {
      if (input.files == null || input.files.length === 0) {
      return;
      }

      // console.log("Files:" + input.files[0].name);

      ExcelUtility.load(input.files[0]).then((w) => {
      this.spreadsheet.workbook = w;
      }, (e) => {
          console.error("Workbook Load Error:" + e);
      });
  }

  public workbookSave(): void {
      ExcelUtility.save(
          this.spreadsheet.workbook, ".xlsx")
  }
}
tsコピー

<div class="container vertical">
    <div class="options horizontal">
        <label class="options-label" for="openFile">Choose Excel File:</label>
        <input class="button" id="openFile" type="file" (change)="openFile($event.target)" accept=".xls, .xlt, .xlsx, .xlsm, .xltm, .xltx">
        <button class="workbookButton" (click)="workbookSave()">
            <label>Save Workbook</label>
        </button>
    </div>

    <div class="container">
        <igx-spreadsheet #spreadsheet height="100%" width="100%">
        </igx-spreadsheet>
    </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

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 las funciones que desee y configurar hojas de cálculo React en un instante para que todo satisfaga las necesidades de los usuarios finales. También hay bibliotecas configurables, alternativas de estilo y formato, opciones de visibilidad y una gran cantidad de 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
cmd

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 {}
ts

Usage

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

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

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 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;
    });
}
ts

API References

• IgxSpreadsheetComponent
• workbook