Angular trabajando con comandos
El componente Angular Spreadsheet te permite ejecutar comandos para activar diferentes funciones de la hoja de cálculo. Este tema explica cómo realizar diferentes operaciones con el control mediante comandos. Muchos de los comandos realizarán su acción en función de las celdas, filas u hojas de cálculo activas. Por ejemplo, dos de estos comandos son ZoomIn y ZoomOut. Consulta la enumeración SpreadsheetAction para obtener una lista completa.
Ejemplo de trabajo con comandos Angular
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 { SpreadsheetAction } 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 zoomIn(): void {
this .spreadsheet.executeAction(SpreadsheetAction.ZoomIn);
}
public zoomOut(): void {
this .spreadsheet.executeAction(SpreadsheetAction.ZoomOut);
}
}
ts コピー <div class ="container vertical" >
<div class ="options horizontal" >
<input class ="options-item" id ="zoomIn" value ="Zoom In" type ="button" (click )="zoomIn()" >
<input class ="options-item" id ="zoomOut" value ="Zoom Out" type ="button" (click )="zoomOut()" >
</div >
<div class ="container" >
<igx-spreadsheet #spreadsheet height ="100%" width ="100%" >
</igx-spreadsheet >
</div >
</div >
html コピー
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
dependencias
Antes de utilizar los comandos, querrá importar SpreadsheetAction
import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet' ;
import { SpreadsheetAction } from 'igniteui-angular-spreadsheet' ;
ts
Uso
El siguiente fragmento muestra cómo puede configurar las reglas de validación de datos.
@ViewChild ("spreadsheet" , { read : IgxSpreadsheetComponent })
public spreadsheet: IgxSpreadsheetComponent;
public zoomIn(): void {
this .spreadsheet.executeAction(SpreadsheetAction.ZoomIn);
}
public zoomOut(): void {
this .spreadsheet.executeAction(SpreadsheetAction.ZoomOut);
}
ts
Referencias de API
ExecuteAction
SpreadsheetAction