React

React 애플리케이션에 SpreadJS 디자이너 컴포넌트를 추가하려면 다음 단계를 수행하세요:

1. 명령 프롬프트에 다음 명령어를 입력하여 React 프로젝트를 생성하세요.

   npm install -g create-react-app
   create-react-app designercomponent
   cd designercomponent
   npm start

2. SpreadJS 디자이너 컴포넌트를 사용하려면 다음 SpreadJS React 모듈을 설치하세요.

   npm install @mescius/spread-excelio
   npm install @mescius/spread-sheets
   npm install @mescius/spread-sheets-barcode
   npm install @mescius/spread-sheets-charts
   npm install @mescius/spread-sheets-languagepackages
   npm install @mescius/spread-sheets-pdf
   npm install @mescius/spread-sheets-print
   npm install @mescius/spread-sheets-shapes
   npm install @mescius/spread-sheets-tablesheet
   npm install @mescius/spread-sheets-pivot-addon
   npm install @mescius/spread-sheets-designer
   npm install @mescius/spread-sheets-designer-resources-ko
   npm install @mescius/spread-sheets-react
   npm install @mescius/spread-sheets-designer-react

3. App.js 파일에서 다음 코드 조각을 사용하여 필요한 모듈을 임포트하세요.

   import '@mescius/spread-sheets-designer-resources-ko';
   import {Designer} from '@mescius/spread-sheets-designer-react';
   import '@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
   import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css'

4. App.js 파일에서 다음 코드 조각을 사용하여 Designer 컴포넌트를 렌더링하세요.

   function App() {
      return (
         <Designer styleInfo = {{width: "1500px", height: '90vh'}}></Designer>
      );
   }
   export default App;

5. 애플리케이션을 실행하세요.

   npm start

SpreadJS 인스턴스에 접근하기

designerInitialized 이벤트를 사용하여 SpreadJS 인스턴스에 접근할 수도 있습니다. 위에서 언급한 1, 2, 3단계를 따라 진행한 후 계속하세요:

1. 디자이너 컴포넌트를 렌더링하고 SpreadJS 인스턴스에 접근하려면 다음 코드 조각을 사용할 수 있습니다.

   function App() {
       return (
           <Designer designerInitialized={designer => { getDesigner(designer) }}
           styleInfo={{ width: "100%", height: '98vh' }}></Designer >
       );
   }
   // 디자이너를 가져오는 함수
   function getDesigner(designer) {
       //이것은 호스팅된 Spread 인스턴스입니다.
       var workbook = designer.getWorkbook();
       var sheet = workbook.getActiveSheet(); sheet.setValue(1, 1, 'Test');
   }

라이선스 적용하기

정식 라이선스를 적용하면 SpreadJS 디자이너 컴포넌트의 모든 기능을 사용할 수 있습니다. SpreadJS, ExcelIO, 디자이너 컴포넌트의 라이선스 키는 아래 코드 조각을 사용해 설정할 수 있습니다.

import React from 'react';
import '@mescius/spread-sheets-designer-resources-en';
import * as GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-designer';
import {Designer} from '@mescius/spread-sheets-designer-react';
import * as ExcelIO from "@mescius/spread-excelio";
 
var sjsLicense = "sjs-distribution-key";
GC.Spread.Sheets.LicenseKey = sjsLicense;
ExcelIO.LicenseKey = sjsLicense;
 
GC.Spread.Sheets.Designer.LicenseKey = " designer-component-distribution-key ";