blob: 0d69798e39208aeeea3f4e0b4addea405755665f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
// @ts-nocheck
"use client";
import React, { useState } from "react";
import "@mescius/spread-sheets-print";
import "@mescius/spread-sheets-io";
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-charts";
import "@mescius/spread-sheets-slicers";
import "@mescius/spread-sheets-pivot-addon";
import "@mescius/spread-sheets-reportsheet-addon";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-ganttsheet";
import "@mescius/spread-sheets-resources-ko";
import "@mescius/spread-sheets-formula-panel";
import "@mescius/spread-sheets-designer-resources-ko";
import '@mescius/spread-sheets-datacharts-addon';
import * as GC from "@mescius/spread-sheets";
import { Designer } from "@mescius/spread-sheets-designer-react";
import {
addSheet,
clearSheet,
createSampleReportForm,
removeSheet,
setSampleReportData,
exportJSON,handleFileImport
} from "@/lib/spread-js/fns";
import { Button } from "@/components/ui/button";
// SpreadJS 라이선싱
// var SpreadJSKey = "xxx"; // 라이선스 키 입력
// GC.Spread.Sheets.LicenseKey = SpreadJSKey;
GC.Spread.Common.CultureManager.culture("ko-kr");
GC.Spread.Sheets.LicenseKey = process.env.NEXT_PUBLIC_SPREADJS_KEY
GC.Spread.Sheets.Designer.LicenseKey = process.env.NEXT_PUBLIC_SPREADJS_KEY
export default function SpreadSheet() {
const [spread, setSpread] = useState(null);
function initSpread(spread) {
setSpread(spread);
//init Status Bar
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(
document.getElementById("statusBar")
);
statusBar.bind(spread);
}
return (
<div className="relative h-full overflow-hidden">
<div className="sample-container">
<div className="w-[calc(100%-280px)] h-full overflow-hidden float-left">
<Designer
styleInfo={{ height: "100%" }}
designerInitialized={async (designer: any) => {
initSpread(designer.getWorkbook());
designer.refresh();
}}
spreadOptions={{ allowDragHeaderToMove: 3 }}
/>
</div>
<div id="statusBar"></div>
</div>
<div className="float-right w-[280px] p-[12px] h-full box-border bg-[#fbfbfb]">
<div className="p-[5px] mt-[10px]">
<div className="flex flex-col gap-2">
<Button onClick={() => addSheet(spread)}>Add Sheet</Button>
<Button onClick={() => removeSheet(spread)}>Remove Sheet</Button>
<Button onClick={() => clearSheet(spread)}>Clear Sheet</Button>
<Button onClick={() => createSampleReportForm(spread)}>
Create Report Form
</Button>
<Button onClick={() => setSampleReportData(spread)}>
Set Report Data
</Button>
<Button onClick={() => exportJSON(spread)}>
Export JSON
</Button>
<Button onClick={() => handleFileImport(spread)}>
Import JSON
</Button>
</div>
</div>
</div>
</div>
);
}
|
