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;
