Angular 스프레드시트 개요
Angular Spreadsheet(Excel 뷰어) 구성 요소는 가볍고 기능이 풍부하며 모든 유형의 스프레드시트 데이터(과학, 비즈니스, 재무 등)를 작동, 시각화 및 편집하는 데 필요한 모든 옵션이 제공됩니다. 모든 정보는 직관적이고 셀, 창 및 워크시트에서 탐색하기 쉬운 표 형식으로 표시할 수 있습니다. IgxSpreadsheetComponent
는 유연한 Excel과 유사한 인터페이스, 자세한 차트 및 활성화, 셀 편집, 조건부 서식, 스타일, 선택, 클립보드와 같은 기능으로 보완됩니다.
Angular Spreadsheet 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, OnInit, ViewChild } from "@angular/core" ;
import { IgxSpreadsheetComponent } 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 openFile(input: HTMLInputElement): void {
if (input.files == null || input.files.length === 0 ) {
return ;
}
ExcelUtility.load(input.files[0 ]).then((w ) => {
this .spreadsheet.workbook = w;
}, (e ) => {
console .error("Workbook Load Error:" + e);
});
}
public workbookSave(): void {
ExcelUtility.save(
this .spreadsheet.workbook, ".xlsx" )
}
}
ts コピー <div class ="container vertical" >
<div class ="options horizontal" >
<label class ="options-label" for ="openFile" > Choose Excel File:</label >
<input class ="button" id ="openFile" type ="file" (change )="openFile($event.target)" accept =".xls, .xlt, .xlsx, .xlsm, .xltm, .xltx" >
<button class ="workbookButton" (click )="workbookSave()" >
<label > Save Workbook</label >
</button >
</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.
Functionality
Excel 스프레드시트와 마찬가지로 필터링 기능, 정렬, 셀 이동, 셀 색상 관련 사용자 정의, 키보드 단축키를 적용하고 수식 계산 기능도 추가할 수 있습니다.
Spreadsheet Usage
스프레드시트는 모든 최신 브라우저와 호환되며 복잡하고 방대한 스프레드시트 모델에 최적화되어 있으면서도 완벽한 기능과 단순성을 보장합니다.
원하는 기능을 쉽게 선택, 추가, 제거, 켜기/끄기하고 React 시트를 즉시 구성하여 최종 사용자의 요구에 모두 부응할 수 있습니다. 또한 구성 가능한 라이브러리, 스타일링 및 서식 대체, 가시성 옵션, 선택할 수 있는 다양한 테마가 있습니다.
Excel의 데이터 작업과 마찬가지로 스프레드시트 구성 요소는 잘 알려진 Excel 클립보드 작업(복사, 붙여넣기, 잘라내기)을 모두 제공합니다. 즉시 사용하기 위해 추가 교육이나 새로운 기술이 필요하지 않습니다. 또한 정렬, 전체 키보드 탐색, 값 및 수식, 셀 끌기, 열 및 행 편집, 필터링, 숫자 서식 지정, 크기 조정 옵션도 제공됩니다. 스마트하고 빠른 계산 엔진은 가장 복잡한 추정도 가능하게 합니다. Excel에 종속되지 않습니다.
과학, 비즈니스, 엔지니어링, 금융, 교육 데이터를 수집하고 관리합니다. 분석, 고급 그리드, 보고서, 데이터 입력 양식, 예산 책정, 예측 시나리오, 사용자 정의 스프레드시트를 준비하고 생성합니다. 이 모든 것은 포괄적인 API 덕분입니다.
스프레드시트를 사용하면 데이터 처리가 100% 안전하고 안전합니다…
내장된 Excel 가져오기/내보내기 기능을 사용하면 Excel 문서를 즉시 로드 및 열고 필요할 때 볼 수 있으며 변경 사항을 추가하고 저장할 수 있습니다. 또한 완성된 Excel .xlsx 스프레드시트를 쉽게 내보낼 수 있습니다.
Dependencies
Angular 스프레드시트 구성요소를 설치할 때, 핵심 패키지와 엑셀 패키지도 설치해야 합니다.
npm install --save igniteui-angular-core
npm install --save igniteui-angular-excel
npm install --save igniteui-angular-spreadsheet
cmd
Component Modules
IgxSpreadsheetComponent
에는 다음 모듈이 필요합니다.
import { IgxExcelModule } from 'igniteui-angular-excel' ;
import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet' ;
@NgModule ({
imports : [
IgxExcelModule,
IgxSpreadsheetModule,
]
})
export class AppModule {}
ts
Usage
이제 Angular 스프레드시트 모듈을 가져왔으므로 다음은 스프레드시트의 기본 구성입니다.
<igx-spreadsheet #spreadsheet height ="500px" width ="100%" >
</igx-spreadsheet >
html
In the following code snippet, an external ExcelUtility class is used to save and load a workbook.
다음은 Angular 스프레드시트에 통합 문서를 로드하는 방법을 보여줍니다.
import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet' ;
import { ExcelUtility } from 'ExcelUtility' ;
@ViewChild ("spreadsheet" , { read : IgxSpreadsheetComponent })
public spreadsheet: IgxSpreadsheetComponent;
ngOnInit ( ) {
const excelFile = '../../assets/Sample1.xlsx' ;
ExcelUtility.loadFromUrl(excelFile).then((w ) => {
this .spreadsheet.workbook = w;
});
}
ts
API References