Spread-sheets-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 모듈 설치하기

   다음 명령어를 사용하여 프로젝트에 spread-sheets-io 모듈과 file-saver 모듈을 설치하세요:

   npm install @mescius/spread-sheets-io
   npm install file-saver --save

5. React 애플리케이션에서 spread-sheets-io 사용하기

   필요에 따라 App.js 파일을 수정하세요. 변경 사항은 브라우저 창을 새로 고침하면 반영됩니다. 예시로 아래 샘플 코드를 사용할 수 있습니다:

   
   

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

   import React, { Component } from 'react';
   import { SpreadSheets, Worksheet, Column } from '@mescius/spread-sheets-react';
   import * as GC from "@mescius/spread-sheets";
   import saveAs from "file-saver";
   import "@mescius/spread-sheets-io";
   
   class APP extends Component {
     constructor(props) {
       super(props);
       this.spreadBackColor = 'aliceblue';
       this.sheetName = 'Goods List';
       this.hostStyle =
       {
         width: '800px',
         height: '600px'
       };
   
     }
   
     workbookInit = (spread) => {
       this.spread = spread
   
       document.getElementById('selectedFile').addEventListener("change", e => this.loadFile(e.target.files[0]));
       document.getElementById('exportBtn').addEventListener("click", this.exportFile);
   
     }
   
     fileTypeMap = { sjs: "sjs", xlsx: "xlsx", ssjson: "ssjson" };
     getFileType = (fileName) => {
       return fileName.split(".").pop();
     }
   
       // Load Files
     loadFile = (file) => {
       console.log("hi")
       const type = this.getFileType(file.name);
       const fileType = type === "xlsx" ? GC.Spread.Sheets.FileType.excel : GC.Spread.Sheets.FileType.ssjson;
   
       if (type === this.fileTypeMap.sjs) {
         this.open(file, () => console.log("SJS File Loaded"), console.error);
       } else if ([this.fileTypeMap.xlsx, this.fileTypeMap.ssjson].includes(type)) {
         this.spread.import(file, () => console.log("File Loaded"), console.error, { fileType });
       } else {
         console.error("Unsupported file type");
       }
     }
   
     // Export Files
     exportFile = () => {
       const type = document.getElementById('exportFileType').value;
       const fileName = `export.${type}`;
       const fileType = type === "xlsx" ? GC.Spread.Sheets.FileType.excel : GC.Spread.Sheets.FileType.ssjson;
   
       if (type === this.fileTypeMap.sjs) {
         this.spread.save(blob => saveAs(blob, fileName), console.error);
       } else if (type === this.fileTypeMap.xlsx || type === this.fileTypeMap.ssjson) {
         this.spread.export(blob => saveAs(blob, fileName), console.error, { fileType });
       }
     }
   
     render() {
       return (
         <div>
   
           <input id="selectedFile" type="file" accept=".sjs, .xlsx, .ssjson" />
   
           <label htmlFor="exportFileType">File Type:</label>
           <select id="exportFileType">
             <option value="xlsx">Excel</option>
             <option value="ssjson">SSJson</option>
             <option value="sjs">SJS</option>
           </select>
           <button id="exportBtn">Export</button>
   
           <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}>
             <Worksheet name={this.sheetName} dataSource={this.data}>
               <Column dataField='Name' width={300}></Column>
               <Column dataField='Category' width={this.columnWidth}></Column>
               <Column dataField='Price' width={this.columnWidth}
                 formatter="$#.00"></Column>
               <Column dataField='Shopping Place' width={this.columnWidth}></Column>
             </Worksheet>
           </SpreadSheets>
         </div>
       )
     }
   }
   export default APP