SpreadJS React 컴포넌트 시작하기

완벽한 스프레드시트 경험을 제공하기 위해 아래 단계를 수행하여 React 응용 프로그램에 Excel과 같은 스프레드시트를 얼마나 쉽게 통합할 수 있는지 살펴봅니다.

단계

  1. React 응용 프로그램 만들기 - 새 React 응용 프로그램은 Create React App 도구를 사용하여 만들 수 있습니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 기본 옵션이 포함된 React 응용 프로그램을 만듭니다. 자세한 내용은 React 앱 만들기 사이트에서 시작하기를 참조하십시오.
    npm init react-app sjs-react-app
    //yarn을 사용한다면
    yarn create react-app sjs-react-app
    cd sjs-react-app
    
  2. SpreadJS npm 패키지 설치 - React SpreadJS 컴포넌트는 @mescius/spread-sheets-react npm 패키지를 통해 배포됩니다. 주요 @mescius/spread-sheets 패키지는 핵심 기능을 제공합니다. 이 패키지의 최신 버전을 설치하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.
    npm install @mescius/spread-sheets-react @mescius/spread-sheets
    //yarn을 사용한다면
    yarn add @mescius/spread-sheets-react @mescius/spread-sheets
    
  3. 응용 프로그램에 SpreadJS React 컴포넌트 추가/초기화 - src 폴더 내의 App.js 파일을 연 후, App.js 내부의 내용을 아래 코드로 대체합니다.
    import './App.css';
    import * as GC from '@mescius/spread-sheets';
    import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
    import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
    
    function App() {
      let hostStyle = {
        width: '100%',
        height: '600px',
        border: '1px solid darkgray'
      }
    
      let initSpread = function (spread) {
        let sheet = spread.getActiveSheet();
        sheet.getCell(0, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center).value('Hello SpreadJS!');
      }
    
      return (
        <div className="App">
          <SpreadSheets workbookInitialized={spread => initSpread(spread)}  hostStyle={hostStyle}>
            <Worksheet></Worksheet>
          </SpreadSheets>
        </div>
      );
    }
    
    export default App;
    

한국어 설정하기

단계

  1. setValue 메서드를 사용하여 셀의 값과 setFormula를 설정하여 계산합니다.
    initSpread: function (spread) {
      let sheet = spread.getActiveSheet();
      //값 설정하기 - Text
      sheet.setValue(1, 1, "값 설정하기");
      //값 설정하기 - Number : B3에 "Number" 라는 텍스트를, C3에 23이라는 숫자를 삽입합니다.
      sheet.setValue(2, 1, "Number");
      sheet.setValue(2, 2, 23);
      sheet.setValue(3, 1, "Text");
      sheet.setValue(3, 2, "GrapeCity");
      sheet.setValue(4, 1, "Datetime");
      //값 설정하기 - DateTime : B5에 "Datetime" 이라는 텍스트를, C5에 오늘 날짜를 삽입합니다.
      sheet.getCell(4, 2).value(new Date()).formatter("yyyy-mm-dd");
    }

스타일 설정하기

SpreadJS에서 제공하는 함수를 사용하면 데이터를 보다 유용하고 매력적으로 표시할 수 있습니다.

단계

  1. 아래와 같이 시트의 스타일을 설정합니다.
    위에서 작성하던 initSpread 함수 내부에 이어서 작성합니다.

    initSpread: function (spread) {
       //spread 초기화
       let sheet = spread.getActiveSheet();
       //값 설정하기 - Text
       sheet.setValue(1, 1, "값 설정하기");
       //값 설정하기 - Number : B3에 "Number" 라는 텍스트를, C3에 23이라는 숫자를 삽입합니다.
       sheet.setValue(2, 1, "Number");
       sheet.setValue(2, 2, 23)
       sheet.setValue(3, 1, "Text");
       sheet.setValue(3, 2, "GrapeCity")
       sheet.setValue(4, 1, "Datetime");
       //값 설정하기 - DateTime : B5에 "Datetime" 이라는 텍스트를, C5에 오늘 날짜를 삽입합니다.
       sheet.getCell(4, 2).value(new Date()).formatter("yyyy-mm-dd");
       // 스타일 설정하기
       // B열, C열의 너비를 200으로 설정합니다.
       sheet.setColumnWidth(1, 200);
       sheet.setColumnWidth(2, 200);
       // B2:C2의 배경색과 글자색을 설정합니다.
       sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
       // B4:C4의 배경색을 설정합니다.
       sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
       // B2:C2의 셀을 병합합니다.
       sheet.addSpan(1, 1, 1, 2);
       // 각 범위에 테두리를 설정합니다.
       sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
         all: true
       });
       sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
         inside: true
       });
       // B2:C2의 병합된 셀에 수직 가운데 정렬을 설정합니다.
       sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
    }

데이터 바인딩

간단하면서도 효율적으로 데이터를 바인딩하는 방법을 살펴봅니다.

단계

  1. getSheet 메서드를 사용하여 작업 중인 시트를 가져옵니다. "new GC.Spread.Sheets.Bindings.CellBindingSource(person);"를 사용하여 셀 바인딩 원본을 설정합니다. 그런 다음 setBindingPath 메서드를 사용하여 지정된 시트 영역에서 지정된 셀의 바인딩 경로를 설정합니다. 그런 다음, setDataSource 메서드를 사용하여 시트의 데이터 소스를 설정합니다.
    initSpread: function (spread) {
       var sheet = spread.getSheet(0);
       var person = { name: 'Peter Winston', age: 25, gender: 'Male', address: { postcode: '10001' } };
       var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
       sheet.setBindingPath(2, 2, 'name');
       sheet.setBindingPath(3, 2, 'age');
       sheet.setBindingPath(4, 2, 'gender');
       sheet.setBindingPath(5, 2, 'address.postcode');
       sheet.setDataSource(source);
    }