Excel IO 요소

React에서 SpreadJS의 Excel IO 요소를 사용하면 Excel 시트를 웹페이지에 빠르게 렌더링하고 표시할 수 있으며, 손쉽게 가져오기 및 내보내기 작업도 수행할 수 있습니다.

1. React 프로젝트 생성하기

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

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

   작업이 완료되면 지정한 위치에 React 프로젝트가 생성됩니다. React 프로젝트 생성 방법에 대한 자세한 내용은 https://reactjs.org/docs/create-a-new-react-app.html을 참조하세요.

2. 프로젝트에 SpreadJS React 모듈 설치하기

   다음 명령어를 사용하여 프로젝트에 SpreadJS React 모듈을 설치하세요:

   npm install @mescius/spread-sheets
   npm install @mescius/spread-sheets-react

3. index.js 파일에 SpreadJS CSS 임포트하기

   다음 코드를 사용하여 index.js 파일에 SpreadJS CSS를 임포트하세요:

   import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

4. 프로젝트에 Excel IO React 모듈과 FileSaver React 모듈 설치하기

   다음 명령어를 사용하여 프로젝트에 Excel I/O 모듈과 file-saver 모듈을 설치하세요:

   npm install @mescius/spread-excelio
   npm install file-saver --save

5. React 애플리케이션에서 Excel IO 사용하기

   필요에 따라 App.js 파일을 수정하세요. 변경 사항은 브라우저 창을 새로 고침하면 반영됩니다.

   예시로 아래 샘플 코드를 사용할 수 있습니다:

   
   

   이 예제는 React 애플리케이션에서 Excel IO 요소를 사용하는 방법을 보여줍니다.

   import React from 'react';
   import './App.css';
   import GC from '@mescius/spread-sheets';
   import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
   
   // ExcelIO 모듈 임포트하기
   import * as ExcelIO from "@mescius/spread-excelio";
   
   // file-saver 모듈 임포트하기
   import saveAs from 'file-saver';
   var SpreadJSKey = "xxx";
   GC.Spread.Sheets.LicenseKey = SpreadJSKey;
   
   // ExcelIO 모듈은 동일한 라이센스 키를 사용하여 별도로 라이선스를 등록해야 합니다.
   ExcelIO.LicenseKey = SpreadJSKey;
   class App extends React.Component {
       constructor(props) {
           super(props);
           this.hostStyle =
               {
                   width: '1100px',
                   height: '800px'
               };
       }
   
   // 워크북 초기화 이벤트 처리하기
       workbookInit = (spread) => {
           this.setState({
               spread: spread
           });
       }
   // Excel 불러오기
       importFile = () => {
           var excelFile = document.getElementById("fileDemo").files[0];
           // IO 클래스 인스턴스 가져오기
           let excelIO = new ExcelIO.IO();
           excelIO.open(excelFile, (json) => {
               this.state.spread.fromJSON(json);
           }, (e) => {
               console.log(e);
           });
       }
   // Excel 내보내기
       exportFile = () => {
           // IO 클래스 인스턴스 가져오기
           let excelIO = new ExcelIO.IO();
           let fileName = document.getElementById("exportFileName").value;
           if (fileName.substr(-5, 5) !== '.xlsx') {
               fileName += '.xlsx';
           }
           var json = JSON.stringify(this.state.spread.toJSON());
           excelIO.save(json, (blob) => {
               saveAs(blob, fileName);
           }, (e) => {
               console.log(e);
           });
       }
       render() {
           return (
               <div>
                   <input type="file" name="files[]" id="fileDemo" accept=".xlsx" />
                   <input type="button" id="loadExcel" value="Import" onClick={this.importFile} />
                   <input type="button" id="saveExcel" value="Export" onClick={this.exportFile} />
                   <input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />
                   <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}>
                       <Worksheet>
                       </Worksheet>
                   </SpreadSheets>
               </div>
           )
       }
   }
   export default App;