클립보드를 사용한 Angular 작업
이 주제에서는 Ignite UI for Angular에서 클립보드 작업을 수행하는 방법을 설명합니다.
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
클립보드를 사용하기 전에 SpreadsheetAction 열거형을 가져오는 것이 좋습니다.
import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
import { SpreadsheetAction } from 'igniteui-angular-spreadsheet';
ts
Usage
다음 코드 조각은 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
API References
GitHub