Angular 스프레드시트 개요

Angular 스프레드시트(Excel 뷰어) 구성 요소는 가볍고 기능이 풍부하며 과학, 비즈니스, 재무 등 모든 유형의 스프레드시트 데이터를 운영, 시각화 및 편집하는 데 필요한 모든 옵션이 제공됩니다. 모든 정보는 셀, 창, 워크시트에서 직관적이고 쉽게 탐색할 수 있는 표 형식으로 표시될 수 있습니다. IgxSpreadsheetComponent는 유연한 Excel과 유사한 인터페이스, 상세한 차트 및 활성화, 셀 편집, 조건부 서식, 스타일 지정, 선택, 클립보드와 같은 기능으로 보완됩니다.

Angular Spreadsheet Example

Functionality

• 특징

Excel 스프레드시트와 마찬가지로 필터링 기능, 정렬, 셀 이동, 셀 색상 관련 사용자 정의, 키보드 단축키를 적용하고 수식 계산 기능도 추가할 수 있습니다.

Spreadsheet Usage

• 성능

스프레드시트는 모든 최신 브라우저와 호환되며 복잡하고 방대한 스프레드시트 모델에 최적화되어 있으면서도 완벽한 기능과 단순성을 보장합니다.

• 유연한 레이아웃과 손쉬운 사용자 정의

원하는 기능을 쉽게 선택, 추가, 제거하고 전환하고, React 시트를 즉시 구성하여 최종 사용자의 요구에 부응할 수 있습니다. 구성 가능한 라이브러리, 스타일 및 형식 지정 대안, 가시성 옵션, 선택할 수 있는 다양한 테마도 있습니다.

• Excel과 유사한 편리한 인터페이스

Excel의 데이터 작업과 마찬가지로 스프레드시트 구성 요소는 잘 알려진 Excel 클립보드 작업(복사, 붙여넣기, 잘라내기)을 모두 제공합니다. 즉시 사용하기 위해 추가 교육이나 새로운 기술이 필요하지 않습니다. 또한 정렬, 전체 키보드 탐색, 값 및 수식, 셀 끌기, 열 및 행 편집, 필터링, 숫자 서식 지정, 크기 조정 옵션도 제공됩니다. 스마트하고 빠른 계산 엔진은 가장 복잡한 추정도 가능하게 합니다. Excel에 종속되지 않습니다.

• 데이터 작업

과학, 비즈니스, 엔지니어링, 금융, 교육 데이터를 수집하고 관리합니다. 분석, 고급 그리드, 보고서, 데이터 입력 양식, 예산 책정, 예측 시나리오, 사용자 정의 스프레드시트를 준비하고 생성합니다. 이 모든 것은 포괄적인 API 덕분입니다.

• 빠르고 안전한 데이터 처리

스프레드시트를 사용하면 데이터 처리가 100% 안전하고 안전합니다…

• Excel 및 CSV 가져오기 및 내보내기

내장된 Excel 가져오기/내보내기 기능을 사용하면 Excel 문서를 즉시 로드 및 열고 필요할 때 볼 수 있으며 변경 사항을 추가하고 저장할 수 있습니다. 또한 완성된 Excel .xlsx 스프레드시트를 쉽게 내보낼 수 있습니다.

Dependencies

Angular 스프레드시트 구성요소를 설치할 때 코어 및 Excel 패키지도 설치해야 합니다.

npm install --save igniteui-angular-core
npm install --save igniteui-angular-excel
npm install --save igniteui-angular-spreadsheet

Component Modules

​IgxSpreadsheetComponent 에는 다음 모듈이 필요합니다.

import { IgxExcelModule } from 'igniteui-angular-excel';
import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet';

@NgModule({
    imports: [
        // ...
        IgxExcelModule,
        IgxSpreadsheetModule,
        // ...
    ]
})
export class AppModule {}

Usage

이제 Angular 스프레드시트 모듈을 가져왔으므로 다음은 스프레드시트의 기본 구성입니다.

<igx-spreadsheet #spreadsheet height="500px" width="100%">
</igx-spreadsheet>

[!Note]

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;
    });
}

API References

• IgxSpreadsheetComponent
• workbook