Angular Working with Clipboard
This topic explains how to perform clipboard operations on the Ignite UI for Angular spreadsheet component.
Angular Working with Clipboard 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, 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
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.
Dependencies
Before making use of the clipboard you will want to import the SpreadsheetAction enumeration:
import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
import { SpreadsheetAction } from 'igniteui-angular-spreadsheet';
ts
Usage
The following code snippet shows how you can execute commands related to the clipboard in the Angular IgxSpreadsheetComponent control:
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
API References
GitHub