Angular trabajando con el portapapeles
En este tema se explica cómo realizar operaciones de portapapeles en el componente de hoja de cálculo Ignite UI for Angular.
Ejemplo de trabajo con portapapeles 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, AfterViewInit, 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 AfterViewInit {
@ViewChild ("spreadsheet" , { read : IgxSpreadsheetComponent, static : true })
public spreadsheet: IgxSpreadsheetComponent;
constructor ( ) { }
public ngAfterViewInit ( ) {
const excelFile = "https://static.infragistics.com/xplatform/excel/SalesData.xlsx" ;
ExcelUtility.loadFromUrl(excelFile).then((w ) => {
this .spreadsheet.workbook = w;
});
}
public cut(): void {
this .spreadsheet.executeAction(SpreadsheetAction.Cut);
}
public copy(): void {
this .spreadsheet.executeAction(SpreadsheetAction.Copy);
}
public paste(): void {
this .spreadsheet.executeAction(SpreadsheetAction.Paste);
}
}
ts コピー <div class ="container vertical" >
<div class ="options horizontal" >
<input class ="options-item" id ="cut" value ="Cut" type ="button" (click )="cut()" >
<input class ="options-item" id ="copy" value ="Copy" type ="button" (click )="copy()" >
<input class ="options-item" id ="paste" value ="Paste" type ="button" (click )="paste()" >
</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 el portapapeles, querrás importar la enumeración SpreadsheetAction
:
import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet' ;
import { SpreadsheetAction } from 'igniteui-angular-spreadsheet' ;
ts
Uso
El siguiente fragmento de código muestra cómo puede ejecutar comandos relacionados con el portapapeles en el control Angular IgxSpreadsheetComponent
:
public cut(): void {
this .spreadsheet.executeAction(SpreadsheetAction.Cut);
}
public copy(): void {
this .spreadsheet.executeAction(SpreadsheetAction.Copy);
}
public paste(): void {
this .spreadsheet.executeAction(SpreadsheetAction.Paste);
}
ts
Referencias de API