Angular 스프레드시트 개요

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

    Angular Spreadsheet Example

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

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

    • 데이터 작업

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

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

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

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

    내장된 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
    App Builder | CTA Banner

    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