반응형
브라우저 화면에 엑셀 데이터를 저장 및 복원을 진행하는데 단순 데이터만이 아니었습니다.
- 수식이 있는 셀
- 병합된 셀
- 조건부 서식
- 셀 스타일
- 사용자가 수정한 화면 상태
위의 데이터도 고려해서 화면 상태 그대로 저장을 해야 하는 니즈가 있었습니다..
이 지점에서 SpreadJS의 JSON 직렬화 기능을 사용하게 되었습니다.
SpreadJS의 toJSON / fromJSON
SpreadJS에서는 워크북 전체 상태를 JSON 형태로 저장하고 복원할 수 있습니다.
JSON 저장
const json = spread.toJSON();JSON 복원
spread.fromJSON(json);
이 방식으로 저장하면 다음 정보들이 함께 포함됩니다.
- 셀 값
- 수식
- 병합 정보
- 스타일
- 조건부 서식
- 시트 구조
따로 하나씩 관리하지 않아도 화면 상태 전체를 그대로 복원할 수 있었습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>SpreadJS Serialization (toJSON/fromJSON) - Simple</title>
<!-- SpreadJS CSS -->
<style>
body { margin: 16px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.box { border: 1px solid #ddd; border-radius: 8px; padding: 8px; }
.title { font-weight: 600; margin: 4px 0 8px; }
.ss { height: 420px; width: 100%; }
textarea { width: 100%; height: 140px; }
label { display: inline-flex; gap: 6px; align-items: center; }
</style>
</head>
<body>
<div class="toolbar">
<button id="btnSave">toJSON (저장)</button>
<button id="btnLoad">fromJSON (복원)</button>
<label><input type="checkbox" id="optIgnoreFormula"> ignoreFormula</label>
<label><input type="checkbox" id="optIgnoreStyle"> ignoreStyle</label>
</div>
<div class="wrap">
<div class="box">
<div class="title">원본(편집)</div>
<div id="ss" class="ss"></div>
</div>
<div class="box">
<div class="title">복원 결과(미리보기)</div>
<div id="ss1" class="ss"></div>
</div>
</div>
<div class="box" style="margin-top:12px;">
<div class="title">직렬화 JSON</div>
<textarea id="jsonText" placeholder="toJSON 결과가 여기에 표시됩니다."></textarea>
</div>
<!-- SpreadJS JS -->
<!-- 필요한 경우(수식 엔진 등) 환경에 맞는 추가 모듈을 포함하세요 -->
<script>
window.onload = function () {
// 1) 두 개의 Workbook 생성
const spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
const spreadPreview = new GC.Spread.Sheets.Workbook(document.getElementById('ss1'), { sheetCount: 1 });
// 2) 샘플 데이터/스타일/수식 (최소 예시)
const sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.setValue(0, 0, 'Item');
sheet.setValue(0, 1, 'Qty');
sheet.setValue(0, 2, 'Price');
sheet.setValue(0, 3, 'Total');
sheet.setValue(1, 0, 'Apple');
sheet.setValue(1, 1, 3);
sheet.setValue(1, 2, 1200);
sheet.setFormula(1, 3, '=B2*C2');
sheet.setValue(2, 0, 'Banana');
sheet.setValue(2, 1, 5);
sheet.setValue(2, 2, 800);
sheet.setFormula(2, 3, '=B3*C3');
// 간단 스타일
sheet.getRange(0, 0, 1, 4).backColor('#F2F2F2');
sheet.getRange(0, 0, 1, 4).font('bold 12px Arial');
sheet.getRange(0, 0, 3, 4).setBorder(
new GC.Spread.Sheets.LineBorder('#999', GC.Spread.Sheets.LineStyle.thin),
{ all: true }
);
sheet.autoFitColumn(0);
sheet.autoFitColumn(1);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.resumePaint();
// 3) toJSON (저장)
document.getElementById('btnSave').addEventListener('click', function () {
const serializationOption = {
ignoreFormula: document.getElementById('optIgnoreFormula').checked,
ignoreStyle: document.getElementById('optIgnoreStyle').checked
};
const json = spread.toJSON(serializationOption);
const jsonStr = JSON.stringify(json, null, 2);
document.getElementById('jsonText').value = jsonStr;
});
// 4) fromJSON (복원)
document.getElementById('btnLoad').addEventListener('click', function () {
const jsonStr = document.getElementById('jsonText').value.trim();
if (!jsonStr) return;
const jsonOptions = {
ignoreFormula: document.getElementById('optIgnoreFormula').checked,
ignoreStyle: document.getElementById('optIgnoreStyle').checked,
doNotRecalculateAfterLoad: false
};
spreadPreview.fromJSON(JSON.parse(jsonStr), jsonOptions);
});
};
</script>
</body>
</html>
반응형
'프로그래밍 > spreadjs' 카테고리의 다른 글
| SpreadJS AI 수식 편집 – 자연어로 엑셀 수식 만드는 방법 (0) | 2026.03.25 |
|---|---|
| SpreadJS AI Pivot Panel – 자연어로 피벗 테이블 만드는 방법 (0) | 2026.03.24 |
| SpreadJS 데이터 유효성 검사 사용기 (0) | 2025.12.08 |
| SpreadJS AI 도우미 - 수식 해설과 생성을 동시에! (2) | 2025.08.11 |
| 엑셀 차트 그려보기 (DataCharts) - SpreadJS (0) | 2025.06.22 |
