SpreadJs에서 .sjs파일 사용

기타 2024. 7. 8. 09:05

spreadJs의 디자이너를 통해 .sjs파일을 만들어 포매팅에 이용할 수 있다.

import React, { useEffect, useRef, useState } from 'react';
import Head from 'next/head';
import GC from '@mescius/spread-sheets'; // 또는 '@grapecity/spread-sheets'
import '@mescius/spread-sheets-resources-ko';
import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

const HomePage = () => {
  const containerRef = useRef(null);
  const [spread, setSpread] = useState(null);

  useEffect(() => {
    if (containerRef.current && !spread) {
      const newSpread = new GC.Spread.Sheets.Workbook(containerRef.current, { sheetCount: 1 });
      setSpread(newSpread);
      console.log('Spread initialized:', newSpread);

      // .sjs 파일 로드
      fetch('/data/spreadsheet.sjs')
        .then(response => response.json())
        .then(json => {
          newSpread.fromJSON(json);
          console.log('Spread loaded from .sjs file:', json);
        })
        .catch(error => console.error('Error loading .sjs file:', error));
    }
  }, [containerRef, spread]);

  useEffect(() => {
    return () => {
      if (spread) {
        spread.destroy();
      }
    };
  }, [spread]);

  return (
    <div>
      <Head>
        <link rel="stylesheet" href="/scripts/gc.spread.sheets.17.0.7.css" />
      </Head>
      <h1>SpreadJS Example</h1>
      <div ref={containerRef} className="spreadContainer" style={{ top: '240px', bottom: '10px', position: 'relative', height: '500px' }}>
        {/* SpreadJS 워크북이 여기에 표시됩니다 */}
      </div>
    </div>
  );
};

export default HomePage;