Angular 구성 스프레드시트
Angular Spreadsheet 구성 요소를 사용하면 사용자가 컨트롤의 여러 가지 다른 측면을 구성할 수 있습니다. 여기에는 셀 편집, 그리드선 및 헤더의 가시성, 보호, 확대/축소 수준 및 Excel 워크시트와 관련된 다양한 다른 속성이 포함되지만 이에 국한되지는 않습니다.
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, 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" , { static : true })
public spreadsheet: IgxSpreadsheetComponent;
public spreadsheetSelectionMode: string ;
public enterKeyNavDirection: string ;
public isProtected: boolean ;
public isFormulaBarVisible: boolean ;
public areGridlinesVisible: boolean ;
public areHeadersVisible: boolean ;
public isEnterKeyNavEnabled: boolean ;
public spreadsheetZoomLevel: number ;
constructor ( ) {
this .spreadsheetSelectionMode = "Normal" ;
this .isProtected = false ;
this .isFormulaBarVisible = true ;
this .areGridlinesVisible = true ;
this .areHeadersVisible = true ;
this .isEnterKeyNavEnabled = false ;
this .enterKeyNavDirection = "Down" ;
this .spreadsheetZoomLevel = 100 ;
}
public onProtectedChanged (e: any ) {
if (e.target.checked) {
this .spreadsheet.activeWorksheet.protect();
} else {
this .spreadsheet.activeWorksheet.unprotect();
}
}
public onTabBarAreaVisibilityChanged (e: any ) {
if (e.target.checked) {
this .spreadsheet.workbook.windowOptions.tabBarVisible = true ;
} else {
this .spreadsheet.workbook.windowOptions.tabBarVisible = false ;
}
}
public spreadsheetSelectionChanged (args: any ) {
const value = args.target.value;
switch (value) {
case "Normal" : {
this .spreadsheet.selectionMode = 0 ;
break ;
}
case "ExtendSelection" : {
this .spreadsheet.selectionMode = 1 ;
break ;
}
case "AddToSelection" : {
this .spreadsheet.selectionMode = 2 ;
break ;
}
}
}
public enterKeyNavDirectionChanged (args: any ) {
const value = args.target.value;
switch (value) {
case "Down" : {
this .spreadsheet.enterKeyNavigationDirection = 0 ;
break ;
}
case "Up" : {
this .spreadsheet.enterKeyNavigationDirection = 2 ;
break ;
}
case "Left" : {
this .spreadsheet.enterKeyNavigationDirection = 3 ;
break ;
}
case "Right" : {
this .spreadsheet.enterKeyNavigationDirection = 1 ;
break ;
}
}
}
public ngOnInit ( ) {
const excelFile = "https://static.infragistics.com/xplatform/excel/SalesData.xlsx" ;
ExcelUtility.loadFromUrl(excelFile).then((w ) => {
this .spreadsheet.workbook = w;
});
}
}
ts コピー <div class ="container vertical" >
<div class ="options horizontal" >
<span class ="options-item" > Selection Mode: </span >
<select [(ngModel )]="spreadsheetSelectionMode" (change )="spreadsheetSelectionChanged($event)" >
<option > AddToSelection</option >
<option > ExtendSelection</option >
<option > Normal</option >
</select >
<span class ="options-item" > Enter Key Navigation Direction: </span >
<select [(ngModel )]="enterKeyNavDirection" (change )="enterKeyNavDirectionChanged($event)" >
<option > Down</option >
<option > Left</option >
<option > Right</option >
<option > Up</option >
</select >
<input type ="range" min =50 max =300 [(ngModel )]="spreadsheetZoomLevel" step =10 >
<label class ="options-item" > Zoom Level: {{spreadsheetZoomLevel}}%</label >
</div >
<div class ="options horizontal" >
<label class ="options-item" > <input type ="checkbox" (change )="onProtectedChanged($event)" /> Is Protected</label >
<label class ="options-item" > <input type ="checkbox" [(ngModel )]="isFormulaBarVisible" /> Is Formula Bar
Visible</label >
<label class ="options-item" > <input type ="checkbox" [(ngModel )]="isEnterKeyNavEnabled" /> Enter Key Navigation
Enabled</label >
</div >
<div class ="options horizontal" >
<label class ="options-item" > <input type ="checkbox" checked =true
(change )="onTabBarAreaVisibilityChanged($event)" /> Is Tab Bar
Area Visible</label >
<label class ="options-item" > <input type ="checkbox" width ="200px" [(ngModel )]="areGridlinesVisible" /> Are
Gridlines
Visible</label >
<label class ="options-item" > <input type ="checkbox" [(ngModel )]="areHeadersVisible" /> Are Headers Visible</label >
</div >
<igx-spreadsheet #spreadsheet height ="100%" width ="100%"
[isFormulaBarVisible ]="isFormulaBarVisible" [areGridlinesVisible ]="areGridlinesVisible"
[areHeadersVisible ]="areHeadersVisible" [isEnterKeyNavigationEnabled ]="isEnterKeyNavEnabled"
[zoomLevel ]="spreadsheetZoomLevel" >
</igx-spreadsheet >
</div >
html コピー
셀 편집 구성
사용자가 셀 값을 편집하고 새 입력을 확인하면 IgxSpreadsheetComponent
컨트롤은 스프레드시트 구성에 따라 Enter 키를 누를 때 현재 활성 셀에 인접한 셀로 이동하는 기능을 갖습니다.
이 Enter 키 탐색을 활성화하려면 isEnterKeyNavigationEnabled
속성을 true 로 설정하면 됩니다. false로 설정하면 Enter 키를 누를 때 활성 셀이 동일하게 유지됩니다.
또한 입력하다 키를 설정하여 enterKeyNavigationDirection
재산 Down
, Up
, Left
또는 Right
.
다음 코드 조각은 위 내용을 보여줍니다.
<igx-spreadsheet isEnterKeyNavigationEnabled =true
enterKeyNavigationDirection ="Left" >
</igx-spreadsheet >
html
this .spreadsheet.isEnterKeyNavigationEnabled = true ;
this .spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;
ts
Angular IgxSpreadsheetComponent
사용하면 컨트롤의 isFormulaBarVisible
속성을 설정하여 수식 표시줄의 표시 여부를 구성할 수 있습니다.
다음 코드 조각은 위 내용을 보여줍니다.
<igx-spreadsheet isFormulaBarVisible =true > </igx-spreadsheet >
html
this .spreadsheet.isFormulaBarVisible = true ;
ts
눈금선 구성
IgxSpreadsheetComponent
사용하면 컨트롤의 areGridlinesVisible
속성을 설정하여 눈금선의 가시성을 구성할 수 있습니다.
다음 코드 조각은 위 내용을 보여줍니다.
<igx-spreadsheet areGridlinesVisible =true > </igx-spreadsheet >
html
this .spreadsheet.areGridlinesVisible = true ;
ts
IgxSpreadsheetComponent
사용하면 컨트롤의 areHeadersVisible
속성을 설정하여 헤더의 가시성을 구성할 수 있습니다.
다음 코드 조각은 위 내용을 보여줍니다.
<igx-spreadsheet areHeadersVisible =false > </igx-spreadsheet >
html
this .spreadsheet.areHeadersVisible = false ;
ts
탐색 구성
IgxSpreadsheetComponent
컨트롤을 사용하면 컨트롤이 "종료 모드"인지 여부를 구성하여 워크시트의 셀 간 탐색을 구성할 수 있습니다. 종료 모드는 화살표 키를 누르면 현재 셀에서 화살표 키를 누르는 방향에 따라 인접한 셀에 데이터가 있는 행이나 열의 끝으로 활성 셀이 이동하는 기능입니다. 이 기능은 대규모 데이터 블록의 끝 부분을 매우 빠르게 탐색하는 데 유용합니다.
예를 들어, 종료 모드에서 큰 100x100 데이터 블록을 클릭하고 Right
화살표 키를 누르면 현재 있는 행의 오른쪽 끝, 데이터가 있는 가장 오른쪽 열로 이동합니다. 이 작업 후에 IgxSpreadsheetComponent
가 종료 모드에서 나옵니다.
종료 모드는 사용자가 End 키를 누르면 런타임에 적용되지만 스프레드시트 컨트롤의 isInEndMode
속성을 설정하여 프로그래밍 방식으로 구성할 수 있습니다.
다음 코드 조각은 IgxSpreadsheetComponent
가 종료 모드에서 시작된다는 점에서 위 내용을 보여줍니다.
<igx-spreadsheet isInEndMode =true > </igx-spreadsheet >
html
this .spreadsheet.isInEndMode = true ;
ts
보호 구성
IgxSpreadsheetComponent
는 워크시트별로 통합 문서 보호를 존중합니다. 워크시트의 보호 구성은 워크시트에서 Protect()
메서드를 호출하여 보호하고 Unprotect()
메서드를 호출하여 보호를 해제하여 구성할 수 있습니다.
아래 코드를 사용하여 IgxSpreadsheetComponent
컨트롤의 현재 활성 워크시트에서 보호를 활성화하거나 비활성화할 수 있습니다.
this .spreadsheet.activeWorksheet.protect();
this .spreadsheet.activeWorksheet.unprotect();
ts
선택 구성
IgxSpreadsheetComponent
컨트롤을 사용하면 컨트롤에서 허용되는 선택 유형을 구성한 다음 사용자가 수정자 키(Shift 또는 Ctrl )를 누를 수 있습니다. 스프레드시트의 selectionMode
속성을 다음 값 중 하나로 설정하면 됩니다.
AddToSelection
: 마우스로 드래그할 때 Ctrl 키를 누르지 않고도 SpreadsheetSelection
개체의 cellRanges
컬렉션에 새 셀 범위가 추가되고, 모드에 들어간 후 첫 번째 화살표 키 탐색으로 범위가 추가됩니다. Shift+F8을 눌러 모드로 들어갈 수 있습니다.
ExtendSelection
: 활성 셀을 나타내는 SpreadsheetSelection
개체의 cellRanges
컬렉션의 선택 범위는 마우스를 사용하여 셀을 선택하거나 키보드를 통해 탐색할 때 업데이트됩니다.
Normal
: 셀이나 셀 범위를 선택하기 위해 마우스를 드래그하면 선택 항목이 대체됩니다. 마찬가지로 키보드를 통해 탐색할 때 새로운 선택 항목이 생성됩니다. Ctrl 키를 누른 채 마우스를 사용하여 새 범위를 추가할 수 있으며, Shift 키를 누른 채 마우스로 클릭하거나 화살표 키와 같은 키보드로 탐색하여 활성 셀을 포함하는 선택 범위를 변경할 수 있습니다.
위에서 설명한 SpreadsheetSelection
객체는 IgxSpreadsheetComponent
컨트롤의 activeSelection
속성을 이용하여 얻을 수 있습니다.
다음 코드 조각은 선택 모드의 구성을 보여줍니다.
<igx-spreadsheet selectionMode ="ExtendSelection" > </igx-spreadsheet >
html
this .spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;
ts
IgxSpreadsheetComponent
컨트롤의 선택은 프로그래밍 방식으로 설정하거나 얻을 수도 있습니다. 단일 선택의 경우 activeCell
속성을 설정할 수 있습니다. 다중 선택은 IgxSpreadsheetComponent
컨트롤의 activeSelection
속성에 의해 반환되는 SpreadsheetSelection
개체를 통해 수행됩니다.
그만큼 SpreadsheetSelection
객체는 AddCellRange()
새로운 형식으로 스프레드시트의 선택 영역에 셀 범위를 프로그래밍 방식으로 추가할 수 있는 방법입니다. SpreadsheetCellRange
물체.
다음 코드 조각은 스프레드시트의 선택 항목에 셀 범위를 추가하는 방법을 보여줍니다.
this .spreadsheet.activeSelection.addCellRange(new SpreadsheetCellRange(2 , 2 , 5 , 5 ));
ts
탭 표시줄 영역 구성
그만큼 IgxSpreadsheetComponent
컨트롤은 탭 표시줄 영역의 가시성 및 너비 구성을 따릅니다. WindowOptions
현재 활동 중인 것 중 workbook
를 통해 tabBarWidth
그리고 TabBarVisibility
각각 속성.
탭바 영역은 워크시트 이름을 컨트롤의 탭으로 시각화하는 영역입니다.
다음 코드 조각을 사용하여 탭 표시줄의 가시성과 너비를 구성할 수 있습니다.
this .spreadsheet.workbook.windowOptions.tabBarVisible = false ;
this .spreadsheet.workbook.windowOptions.tabBarWidth = 200 ;
ts
확대/축소 수준 구성
Angular Spreadsheet 구성 요소는 zoomLevel
속성을 구성하여 확대 및 축소를 지원합니다. 확대 수준은 최대 400%, 최소 10%가 될 수 있습니다.
이 속성을 숫자로 설정하면 백분율이 정수로 표시되므로 zoomLevel
100으로 설정하는 것은 100%로 설정하는 것과 같습니다.
다음 코드 조각은 스프레드시트의 확대/축소 수준을 구성하는 방법을 보여줍니다.
<igx-spreadsheet zoomLevel =200 > </igx-spreadsheet >
html
this .spreadsheet.zoomLevel = 200 ;
ts
API 참조