SpreadJS : 디자이너 컴포넌트
강력하고 완벽한 JS기반 웹 Excel 퍼포먼스
사용자에게 가장 친숙한 MS 365 Excel & Google Sheets와 동일한 UI/UX를 제공합니다.
SpreadJS 디자이너를 통해 웹 환경에서도 코드 몇 줄로 Excel의 기능과 화면을 손쉽게 구현하세요.
화면 구조부터 Excel 기능에 대한 컴포넌트를 제공하여 자유롭게 사용자 정의할 수 있으며 임의로 확장할 수 있습니다.
See the Pen SpreadJS 디자이너 컴포넌트 V15.0.6_홈페이지 게시 전용 by GrapeCity Korea ( @GrapeCity-Korea) on CodePen.
위 화면은 실제 SpreadJS 디자이너 컴포넌트로 구현된 화면입니다.
* 디자이너 컴포넌트를 사용하기 위해서는 반드시 SpreadJS 개발자 라이선스가 필요합니다.
디자이너 컴포넌트 적용 방법
디자이너 컴포넌트를 새 스프레드시트와 통합하는 방법에 대해 알아 보세요.
Step 1. 프로젝트에 SpreadJS CSS, JS 파일을 참조합니다.
<!--CSS 파일-->
<link href=
"css/gc.spread.sheets.excel2013white.0.0.0css"
rel=
"stylesheet"
type=
"text/css" />
<!--스크립트 파일-->
<script type= "text/javascript" src= "scripts/gc.spread.sheets.all.0.0.0.min.js" ></script>
<script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.shapes.0.0.0.min.js" ></script>
<script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.charts.0.0.0.min.js" ></script>
<script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.datacharts.0.0.0.min.js" ></script>
<script type=
"text/javascript" src=
"scripts/plugins/gc.spread.sheets.slicers.0.0.0.min.js" ></script>
<script type=
"text/javascript"
src= "scripts/plugins/gc.spread.sheets.print.0.0.0.min.js"
></script>
<script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.barcode.0.0.0.min.js" ></script>
<script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.pdf.0.0.0.min.js" ></script>
<script type= "text/javascript" src= "scripts/plugins/gc.spread.pivot.pivottables.0.0.0.min.js" ></script>
<script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.tablesheet.0.0.0.min.js" ></script>
<script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.ganttsheet.0.0.0.min.js" ></script>
<script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.formulapanel.0.0.0.min.js" ></script>
<script type= "text/javascript" src= "scripts/plugins/gc.spread.report.reportsheet.0.0.0.min.js" ></script>
<script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.io.0.0.0.min.js" ></script>
// 문화권 설정
<script type= "text/javascript" src= "scripts/resources/ko/gc.spread.sheets.resources.ko.0.0.0.min.js" ></script>
Step 2. 프로젝트에 디자이너 컴포넌트의 CSS, JS 파일을 참조합니다.
<!--CSS 파일-->
<link href=
"css/gc.spread.sheets.designer.0.0.0.min.css"
rel=
"stylesheet"
type=
"text/css"
/>
<!--스크립트 파일-->
<script type= "text/javascript" src= "scripts/gc.spread.sheets.designer.resource.ko.0.0.0.min.js" ></script>
<script type= "text/javascript" src= "scripts/gc.spread.sheets.designer.all.0.0.0.min.js" ></script>
Step3: DOM 요소를 페이지 Body에 컨테이너로 포함합니다.
<div id= "gc-designer-container" role="application" ></div>
Step4: 디자이너 컴포넌트를 초기화합니다. 초기화하기 전에 디자이너 컴포넌트 및 SpreadJS에 대한 라이선스 키도 설정합니다.
// 라이선스 키 설정
GC.Spread.Sheets.LicenseKey = 'xxx';
GC.Spread.Sheets.Designer.LicenseKey = 'xxxx';
var designer
= new
GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"));
✅ 완성된 HTML 전체 코드는 다음과 같습니다.
*
<style>
태그의 내용을 포함하여 코드를 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="spreadjs culture" content="ko-kr" />
<title>스프레드시트 디자이너</title>
<!-- CSS 파일 -->
<link href= "css/gc.spread.sheets.excel2013white.0.0.0.css" rel= "stylesheet" type= "text/css" />
<link href= "css/gc.spread.sheets.designer.0.0.0.min.css" rel= "stylesheet" type= "text/css" />
</head>
<style>
.designer {
height: calc(100% - 15px);
}
.ribbon-button-welcome
{
background-image: url('./welcome.png');
background-size: 35px 35px;
}
html,
body {
overflow: hidden;
padding: 0;
margin: 0;
height: 100%;
}
#gc-designer-container {
height: 100%;
}
</style>
<body unselectable="on">
<!-- DOM element -->
<div id="gc-designer-container" role="application"></div>
<!-- Script 파일 -->
<script type="text/javascript" src="scripts/gc.spread.sheets.all.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.shapes.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.charts.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.datacharts.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.slicers.0.0.0.min.js"></script>
<script type="text/javascript"
src="scripts/plugins/gc.spread.sheets.print.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.barcode.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.pdf.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.pivot.pivottables.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.tablesheet.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.ganttsheet.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.formulapanel.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.report.reportsheet.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.io.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/resources/ko/gc.spread.sheets.resources.ko.0.0.0.min.js"></script>
<script type="text/javascript"
src="scripts/gc.spread.sheets.designer.resource.ko.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/gc.spread.sheets.designer.all.0.0.0.min.js"></script>
<script type="text/javascript">
window.onload = function () {
// 라이선스 키 설정
GC.Spread.Sheets.LicenseKey = 'xxx';
GC.Spread.Sheets.Designer.LicenseKey = 'xxxx';
var designer
= new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"));
}
</script>
</body>
</html>
Step5: 브라우저에서 디자이너 컴포넌트를 확인하실 수 있습니다.
디자이너 컴포넌트 화면 구성
디자이너 컴포넌트 커스터마이징
아래 내용들을 참고하여 디자이너 컴포넌트를 여러분이 원하는 대로 커스터마이징해 보시길 바랍니다.
-
리본 메뉴 탭 추가List Item 1
자주 사용하는 명령에 대해 새로운 리본 메뉴 탭을 추가할 수 있습니다.
-
리본 메뉴 버튼 추가List Item 2
리본 메뉴 탭에 새로운 버튼을 추가할 수 있습니다.
-
컨텍스트 메뉴 항목 커스터마이징List Item 3
새로운 컨텍스트 메뉴 항목을 추가할 수 있습니다.
-
사용자 정의 대화 상자 추가List Item 4
특정 탭의 버튼을 활성화하거나 비활성화할 수 있습니다.
-
리본 메뉴 버튼 활성화 / 비활성화
특정 탭의 버튼을 활성화하거나 비활성화할 수 있습니다.
-
파일 불러오기 이벤트 바인딩
파일을 불러올 때 이벤트를 발생시킬 수 있습니다.
-
상태 표시줄 항목 추가
상태 표시줄에 원하는 항목을 추가할 수 있습니다.
-
사용자 지정 컴포넌트 추가
원하는 컴포넌트를 추가할 수 있습니다.
-
디자이너 컴포넌트 지역화 리소스 사용자 정의
getResources와 setResources 메소드를 이용하여 디자이너 컴포넌트 지역화 리소스를 사용자 정의할 수 있습니다.
자주 묻는 질문들
SpreadJS 웹 Excel 에디터 FAQ
SpreadJS로 완성하는 다양한 엔터프라이즈 비즈니스 기능
SpreadJS의 비즈니스 Excel 확장 기능을 지금 확인해 보세요
SpreadJS는 다양한 기업 비즈니스 요구사항에 맞춘 Excel 기반 기능을 제공하여, 복잡한 비즈니스 시스템도 빠르고 효율적으로 개발할 수 있도록 합니다.
실시간 동시 편집
여러 사용자가 하나의 시트에서 동시에 협업하는 환경을 구축하세요.
-
서버 프레임워크 제공 Node.js 기반의 안정적인 동시 편집 서버 구축
-
실시간 협업 다중 사용자 동시 입력 및 사용자 동작/커서 실시간 표시
-
충돌 방지 기술 운영 변환(OT) 엔진 기반의 정교한 충돌 제어 및 권한 관리
AI 어시스턴트
자연어 기반의 수식 생성과 데이터 분석으로 업무 효율을 극대화하세요.
-
멀티 AI 모델 지원 OpenAI, Gemini, Claude 및 사내 커스텀 AI 연동 가능
-
자연어 명령 자연어로 엑셀 수식 생성, 설명 및 피벗 테이블 자동 구축
-
Excel AI 함수 데이터 분석을 위한 전용 AI 함수 라이브러리 제공
피벗 테이블 (PivotTable)
대량의 Excel 데이터를 빠르게 요약하고 인사이트를 도출하세요.
-
Excel 유사 경험 Excel과 동일한 피벗 UI와 사용성을 웹에서 구현
-
JS 컨트롤 세트 피벗 UI 커스터마이징을 위한 사용자 정의 기능 제공
-
뷰 매니저 사용자별 피벗 분석 화면 저장 및 로드 함수 지원
간트 시트 (GanttSheet)
프로젝트 일정 관리와 리소스 스케줄링 기능을 Excel 시트에 통합하세요.
-
프로젝트 관리 기능 타임스케일, 태스크바, 캘린더 등 필수 기능 완벽 지원
-
데이터 연동 DataManager를 활용한 손쉬운 데이터 바인딩
-
유연한 호환 Excel 및 JSON 기반의 가져오기/내보내기 지원
리포트 시트 (ReportSheet)
복잡한 비즈니스 데이터를 동적인 Excel 보고서로 변환하세요.
-
동적 리포팅 JSON 기반의 데이터 연동 및 보고서 자동 생성
-
전문적인 스타일링 일관된 리포트 레이아웃 유지 및 정교한 서식 적용
-
고급 분석 기능 시트 간 교차 참조 및 데이터 집계 지원
데이터 차트 (DataChart)
Excel 데이터를 시각화하여 직관적인 대시보드를 생성해보세요.
-
대시보드 디자이너 코딩 없이 Excel 대시보드 생성 가능한 전용 디자이너 제공
-
다양한 차트 다양한 Excel 차트 타입 지원 및 실시간 데이터 반영
-
손쉬운 바인딩 DataManager를 통한 빠르고 간편한 JSON 데이터 연결
