React 스프레드시트 개요

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

React 스프레드시트 예시

EXAMPLE

DATA

TSX

import { saveAs } from "file-saver";
import { Workbook } from "@infragistics/igniteui-react-excel";
import { WorkbookFormat } from "@infragistics/igniteui-react-excel";
import { WorkbookSaveOptions } from "@infragistics/igniteui-react-excel";
import { WorkbookLoadOptions } from "@infragistics/igniteui-react-excel";
import { IgrExcelXlsxModule } from "@infragistics/igniteui-react-excel";
import { IgrExcelCoreModule } from "@infragistics/igniteui-react-excel";
import { IgrExcelModule } from "@infragistics/igniteui-react-excel";

IgrExcelCoreModule.register();
IgrExcelModule.register();
IgrExcelXlsxModule.register();

export class ExcelUtility {

    public static getExtension(format: WorkbookFormat): string {
        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, new WorkbookLoadOptions(), (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): void => {
                const data = new Uint8Array(req.response);
                Workbook.load(data, new WorkbookLoadOptions(), (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): void => {
                reject(fr.error);
            };

            if (fr.readAsBinaryString) {
                fr.onload = (e): void => {
                    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): void => {
                    resolve(new Uint8Array(fr.result as ArrayBuffer));
                };
                fr.readAsArrayBuffer(file);
            }
        });
    }
}
tsコピー

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrExcelXlsxModule } from "@infragistics/igniteui-react-excel";
import { IgrExcelCoreModule } from "@infragistics/igniteui-react-excel";
import { IgrExcelModule } from "@infragistics/igniteui-react-excel";
import { IgrSpreadsheetModule } from "@infragistics/igniteui-react-spreadsheet";
import { IgrSpreadsheet } from "@infragistics/igniteui-react-spreadsheet";
import { ExcelUtility } from './ExcelUtility';

IgrExcelCoreModule.register();
IgrExcelModule.register();
IgrExcelXlsxModule.register();

IgrSpreadsheetModule.register();

export default class SpreadsheetOverview extends React.Component<any, any> {
    public spreadsheet: IgrSpreadsheet;

    constructor(props: any) {
        super(props);
        this.onSpreadsheetRef = this.onSpreadsheetRef.bind(this);
        this.openFile = this.openFile.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <input type="file" onChange={(e) => this.openFile(e.target.files as FileList)} accept=".xls, .xlt, .xlsx, .xlsm, .xltm, .xltx"/>
                </div>
                <IgrSpreadsheet ref={this.onSpreadsheetRef} height="calc(100% - 30px)" width="100%" />
            </div>
        );
    }

    public openFile(selectorFiles: FileList) {
        if (selectorFiles != null && selectorFiles.length > 0) {
            ExcelUtility.load(selectorFiles[0]).then((w) => {
                this.spreadsheet.workbook = w;
            }, (e) => {
                console.error("Workbook Load Error");
            });
        }
    }

    public onSpreadsheetRef(spreadsheet: IgrSpreadsheet) {
        if (!spreadsheet) { return; }

        this.spreadsheet = spreadsheet;

        const url = "https://static.infragistics.com/xplatform/excel/SalesData.xlsx"
        ExcelUtility.loadFromUrl(url).then((w) => {
            this.spreadsheet.workbook = w;
        });
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SpreadsheetOverview/>);
tsxコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

기능성

• 특징

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

스프레드시트 사용량

• 성능

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

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

원하는 기능을 쉽게 선택, 추가, 제거, 켜기/끄기하고 React 시트를 즉시 구성하여 최종 사용자의 요구에 모두 부응할 수 있습니다. 또한 구성 가능한 라이브러리, 스타일링 및 서식 대체, 가시성 옵션, 선택할 수 있는 다양한 테마가 있습니다.

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

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

• 데이터 작업

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

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

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

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

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

종속성

React 스프레드시트 컴포넌트를 설치할 때, core 및 excel 패키지도 설치해야 합니다.

npm install --save igniteui-react-core
npm install --save igniteui-react-excel
npm install --save igniteui-react-spreadsheet
cmd

컴포넌트 모듈

​IgrSpreadsheet 다음 모듈이 필요합니다.

import { IgrExcelModule } from 'igniteui-react-excel';
import { IgrSpreadsheetModule } from 'igniteui-react-spreadsheet';

IgrExcelModule.register();
IgrSpreadsheetModule.register();
ts

용법

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

다음 코드 조각에서는 통합 문서를 저장하고 로드하는 데 외부 ExcelUtility 클래스가 사용됩니다.

다음은 React 스프레드시트에 통합 문서를 로드하는 방법을 보여줍니다.

import { IgrSpreadsheet } from 'igniteui-react-spreadsheet';
import { ExcelUtility } from 'ExcelUtility';

// ...

public spreadsheet : IgrSpreadsheet = new IgrSpreadsheet({})

ngOnInit() {
    const excelFile = '../../assets/Sample1.xlsx';
    ExcelUtility.loadFromUrl(excelFile).then((w) => {
      this.spreadsheet.workbook = w;
    });
}
ts

API 참조

• IgrSpreadsheet
• workbook