Web Components Working with Clipboard
This topic explains how to perform clipboard operations on the Ignite UI for Web Components spreadsheet component.
Web Components Working with Clipboard Example
import { saveAs } from "file-saver" ;
import { Workbook } from 'igniteui-webcomponents-excel' ;
import { WorkbookFormat } from 'igniteui-webcomponents-excel' ;
import { WorkbookSaveOptions } from 'igniteui-webcomponents-excel' ;
import { WorkbookLoadOptions } from 'igniteui-webcomponents-excel' ;
import { IgcExcelXlsxModule } from 'igniteui-webcomponents-excel' ;
import { IgcExcelCoreModule } from 'igniteui-webcomponents-excel' ;
import { IgcExcelModule } from 'igniteui-webcomponents-excel' ;
IgcExcelCoreModule.register();
IgcExcelModule.register();
IgcExcelXlsxModule.register();
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, new WorkbookLoadOptions(), (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, new WorkbookLoadOptions(), (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 { IgcSpreadsheetModule } from 'igniteui-webcomponents-spreadsheet' ;
import { IgcSpreadsheetComponent } from 'igniteui-webcomponents-spreadsheet' ;
import { ModuleManager } from 'igniteui-webcomponents-core' ;
import { SpreadsheetAction } from 'igniteui-webcomponents-spreadsheet' ;
import { ExcelUtility } from './ExcelUtility' ;
ModuleManager.register(IgcSpreadsheetModule);
export class SpreadsheetClipboard {
private spreadsheet: IgcSpreadsheetComponent;
constructor ( ) {
this .onCutBtnClick = this .onCutBtnClick.bind(this )
this .onCopyBtnClick = this .onCopyBtnClick.bind(this )
this .onPasteBtnClick = this .onPasteBtnClick.bind(this )
this .spreadsheet = document .getElementById('spreadsheet' ) as IgcSpreadsheetComponent;
let path = 'https://static.infragistics.com/xplatform/excel/SalesData.xlsx' ;
ExcelUtility.loadFromUrl(path).then((w ) => {
this .spreadsheet.workbook = w;
});
document .getElementById('cutBtn' )!.addEventListener('click' , this .onCutBtnClick);
document .getElementById('copyBtn' )!.addEventListener('click' , this .onCopyBtnClick);
document .getElementById('pasteBtn' )!.addEventListener('click' , this .onPasteBtnClick);
}
onCutBtnClick ( ) {
this .spreadsheet.executeAction(SpreadsheetAction.Cut);
}
onCopyBtnClick ( ) {
this .spreadsheet.executeAction(SpreadsheetAction.Copy);
}
onPasteBtnClick ( ) {
this .spreadsheet.executeAction(SpreadsheetAction.Paste);
}
}
new SpreadsheetClipboard();
ts コピー <!DOCTYPE html >
<html >
<head >
<title > SpreadsheetClipboard</title >
<meta charset ="UTF-8" />
<link rel ="shortcut icon" href ="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel ="stylesheet" href ="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel ="stylesheet" href ="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type ="text/css" />
</head >
<body >
<div id ="root" >
<div class ="container sample" >
<div class ="options horizontal" >
<input type ="button" class ="options-label" id ="cutBtn" value ="Cut" />
<input type ="button" class ="options-label" id ="copyBtn" value ="Copy" />
<input type ="button" class ="options-label" id ="pasteBtn" value ="Paste" />
</div >
<igc-spreadsheet id ="spreadsheet" width ="100%" height ="calc(100% - 2.5rem)" >
</igc-spreadsheet >
</div >
</div >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
Like this sample? Get access to our complete Ignite UI for Web Components 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 { IgcSpreadsheetComponent } from 'igniteui-webcomponents-spreadsheet' ;
import { SpreadsheetAction } from 'igniteui-webcomponents-spreadsheet' ;
ts
Usage
The following code snippet shows how you can execute commands related to the clipboard in the Web Components IgcSpreadsheetComponent
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