Create React App에서 SpreadJS 시작하기

SpreadJS는 개별 모듈과 플러그인을 함께 사용하는 것을 Create React App 개발 환경에서 지원합니다.

모듈과 플러그인을 함께 사용하기

이는 다음 단계를 포함합니다:

1. Create React App 프로젝트 생성

   명령 프롬프트 창을 열고 다음 명령어를 입력하세요:

   npx create-react-app my-app
   cd my-app 
   npm start

   완료하면 Create React App 프로젝트가 지정된 위치에 생성됩니다. Create React App 프로젝트 생성 방법에 대한 자세한 정보는 Create React App을 참조하세요.

2. 프로젝트에 SpreadJS 모듈과 플러그인 설치하기

   다음 명령어를 사용하여 SpreadJS NPM 모듈과 플러그인을 설치하세요:

   npm run eject
   npm install @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-print @mescius/spread-sheets-react

3. Create React App 애플리케이션에서 SpreadJS 사용하기

   다음 코드를 사용하여 App.js 파일을 수정하세요.

   변경 사항은 브라우저 창을 새로 고침하면 반영됩니다.

   import "@mescius/spread-common";
   import "@mescius/spread-calc-engine";
   import "@mescius/spread-sheets-core";
   import "@mescius/spread-sheets-calc-engine";
   import "@mescius/spread-sheets-print";
   import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
   import './App.css';
   import '../node_modules/@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css';
   function App() {
       let initSpread = function (value) {
           let spread = window.spread = value;
           let sheet = spread.getActiveSheet();
           sheet.setValue(0, 0, "Hello SpreadJS");
       }
       let printSpread = function () {
           let spread = window.spread;
           spread.print();
       }
       return (<div className="sample-tutorial">
           <div className="sample-spreadsheets">
               <SpreadSheets workbookInitialized={spread => initSpread(spread)}>
                   <Worksheet></Worksheet>
               </SpreadSheets>
           </div>
           <div id="testButton" onClick={() => printSpread()}>Print</div>
       </div>);
   }
   export default App;

   다음 코드를 사용하여 App.css 파일을 수정하세요:

   .sample-tutorial {
       position: relative;
       height: 400px;
       overflow: hidden;
   } 
   .sample-spreadsheets {
       width: 100%;
       height: 300px;
   }
   body {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
   } 
   #testButton {
       margin-top: 10px;
       text-align: center;
       width: 100px;
       height: 30px; 
       border: 1px solid gray; 
       background-color: lightblue;
   }

   web.config.js에서 alias를 검색한 후, 아래와 같이 하나의 alias를 추가하세요:

   .....
   alias:{
      "@mescius/spread-sheets": require.resolve("@mescius/spread-common"),
      .......
   }
   .....