Not ready yet.
현재 최신 버전 : ComponentOne, Wijmo 2021 V1 | Spread 14 | ActiveReports.NET 15 | ActiveReportsJS 2 | Forguncy 6 | GcExcel 4


아래 화면은 실제 디자이너 컴포넌트로 구현된 화면입니다.

See the Pen SpreadJS 디자이너 컴포넌트 V14.0.3 by GrapeCity Korea (@GrapeCity-Korea) on CodePen.

디자이너 컴포넌트 화면 구성

화면 구성 요소
리본 메뉴 구성 요소

디자이너 컴포넌트 커스터마이징

리본 메뉴 탭 추가
리본 메뉴 탭 추가
자주 사용하는 명령에 대해 새로운 리본 메뉴 탭을 추가할 수 있습니다.
리본 메뉴 버튼 추가
리본 메뉴 버튼 추가
리본 메뉴 탭에 새로운 버튼을 추가할 수 있습니다.
컨텍스트 메뉴 항목 커스터마이징
컨텍스트 메뉴 항목 커스터마이징
새로운 컨텍스트 메뉴 항목을 추가할 수 있습니다.
새로운 대화 상자 생성
새로운 대화 상자 추가
사용자 정의 작업을 위한 새로운 대화 상자를 추가할 수 있습니다.

디자이너 컴포넌트 적용 방법

디자이너 컴포넌트를 새 스프레드시트와 통합하는 방법에 대해서 알아 보세요.

  • Step1
  • Step2
  • Step3
  • Step4
  • Step5

Step1: 프로젝트에 SpreadJS CSS, JS 파일을 참조합니다.


                <!--CSS 파일-->  
                <link rel="styleSheet" href="css/gc.spread.sheets.0.0.0.css"/>

                <!--스크립트 파일--> 
                <script src="scripts/gc.spread.sheets.all.0.0.0.min.js"></script> 
                <script src="scripts/gc.spread.sheets.charts.0.0.0.min.js"></script> 
                <script src="scripts/gc.spread.sheets.shapes.0.0.0.min.js" type ="text/javascript"></script> 
                <script src="scripts/gc.spread.sheets.print.0.0.0.min.js" type="text/javascript"></script> 
                <script src="scripts/gc.spread.sheets.barcode.0.0.0.min.js" type="text/javascript"></script> 
                <script src="scripts/gc.spread.sheets.pdf.0.0.0.min.js" type="text/javascript"></script> 
                <script src="scripts/gc.spread.excelio.0.0.0.min.js" type="text/javascript"></script>
                        

Step2: 프로젝트에 디자이너 컴포넌트의 CSS, JS 파일을 참조합니다.


                <!--CSS files--> 
                <link rel="styleSheet" href="css/gc.spread.sheets.designer.0.0.0.min.css" />

                <!--Script files-->
                <script src="scripts/gc.spread.sheets.designer.resource.en.0.0.0.min.js " type="text/javascript"></script>
                <script src="scripts/gc.spread.sheets.designer.all.0.0.0.min.js" type="text/javascript"></script>

                        

Step3: DOM 요소를 페이지 Body에 컨테이너로 포함합니다.


                    
                <div id="designerHost" style="width:100%; height: 000px; border:1px solid grey;"><div>

                        

Step4: 디자이너 컴포넌트를 초기화합니다. 초기화하기 전에 디자이너 컴포넌트 및 SpreadJS에 대한 라이선스 키도 설정합니다.


                    
                // 라이센스 키 설정
                //GC.Spread.Sheets.Designer.LicenseKey = "XXX";
                //GC.Spread.Sheets.LicenseKey = "XXXX";

                var designer = new GC.Spread.Sheets.Designer.Designer (document.getElementById ( "designerHost" ));

                        

이렇게 완성된 HTML의 전체 코드는 다음과 같습니다.


                    
                <!DOCTYPE html>
                <html>
                <head>
                    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>

                    <!--CSS files--> 
                    <link rel="styleSheet" href="css/gc.spread.sheets.0.0.0.css" />
                    <link rel="styleSheet" href="css/gc.spread.sheets.designer.0.0.0.min.css" />

                    <!--Script files-->
                    <script src="scripts/gc.spread.sheets.all.0.0.0.min.js"></script>
                    <script src="scripts/gc.spread.sheets.charts.0.0.0.min.js"></script>
                    <script src="scripts/gc.spread.sheets.shapes.0.0.0.min.js" type="text/javascript"></script>
                    <script src="scripts/gc.spread.sheets.print.0.0.0.min.js" type="text/javascript"></script>
                    <script src="scripts/gc.spread.sheets.barcode.0.0.0.min.js" type="text/javascript"></script>
                    <script src="scripts/gc.spread.sheets.pdf.0.0.0.min.js" type="text/javascript"></script>
                    <script src="scripts/gc.spread.excelio.0.0.0.min.js" type="text/javascript"></script>
                    <script src="scripts/gc.spread.sheets.designer.resource.en.0.0.0.min.js " type="text/javascript"></script>
                    <script src="scripts/gc.spread.sheets.designer.all.0.0.0.min.js" type="text/javascript"></script>

                    <script>
                        window.onload = function () {

                            //Set License Key
                            //GC.Spread.Sheets.Designer.LicenseKey = "XXX";
                            //GC.Spread.Sheets.LicenseKey = "XXXX";

                            var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
                        }
                    </script>
                </head>
                <body>
                    <!--DOM element-->
                    <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
                </body>
                </html>

                        

Step5: 브라우저에서 디자이너 컴포넌트를 확인하실 수 있습니다.

SpreadJS 디자이너 컴포넌트 화면
데모 실행

프레임워크 지원

SpreadJS 디자이너 컴포넌트는 개발자가 빠른 웹 개발과 효율적인 코드 유지 관리를 쉽게 할 수 있도록 JavaScript 프레임 워크에 대한 지원을 제공합니다. 각 프레임워크에서 디자이너 컴포넌트를 시작하는 방법을 알아보세요.

FAQ

SpreadJS와 디자이너 컴포넌트의 차이점은 무엇인가요?

디자이너 컴포넌트는 SpreadJS에서 제공하는 UI와 API로 만들어진, 완전한 Excel 웹 에디터라고 보시면 됩니다. 디자이너 컴포넌트를 통해, 별도의 화면 구성을 개발하지 않고도, 사용자에게 익숙한 엑셀 화면을 코드 몇 줄만으로 웹 상에 구현이 가능합니다.

디자이너 컴포넌트를 사용하기 위한 라이선스 정책은 어떻게 되나요?

디자이너 컴포넌트를 정식으로 사용하기 위해서는 "SpreadJS 개발자 라이선스"가 반드시 필요합니다. 디자이너 컴포넌트 라이선스는 개발자 라이선스가 있는 고객만 구매할 수 있으며, 회사 당 1개의 라이선스만 보유하시면 됩니다. (로컬 PC, localhost에서 개발 및 테스트 시에는 배포 라이선스가 필요하지 않습니다.)

SpreadJS 디자이너 컴포넌트에 SpreadJS 컨트롤도 포함되어 있나요?

SpreadJS 디자이너 컴포넌트는 별도로 판매되며 다른 컨트롤과 해당 패키지에 포함되어 있지 않습니다. 또한, 디자이너 컴포넌트를 구매하여 사용하기 위해서는 반드시 SpreadJS 개발자 라이선스가 필요합니다.

Case >
GrapeCity라는 회사에 3명의 개발자가 있고, 디자이너 컴포넌트를 사용하고 싶은 경우, 다음과 같이 구매하시면 됩니다.

디자이너 컴포넌트를 배포할 때 배포 키(Key)는 어떻게 구하나요?

디자이너 배포 키를 얻기 위해서는, 아래 3가지 라이선스를 보유하고 있거나, 구매해야 합니다.

배포 라이선스를 구매/보유 하셨다면, 요청하신 도메인/IP에 대하여 아래와 같은 2개의 배포 키를 제공해 드립니다.

위 두 가지 키를 JS코드에 모두 등록해줘야, 디자이너 컴포넌트를 서버에 배포했을 때 정상적으로 동작합니다.

* 참고
만약, 이미 동일한 버전에 대해서 SpreadJS 배포 키를 가지고 사용하고 계신 있으신 경우,
배포 라이선스 추가 구매 없이 디자이너 컴포넌트 라이선스를 구매하신 후, 배포 키를 요청하시면, 디자이너 컴포넌트 배포 키를 제공해 드립니다.

Case1(같은 버전)>
SpreadJS v14 개발자 라이선스 및 "www.grapecity.co.kr"와 "dev.grapecity.co.kr"에 대해서 2개의 배포 라이선스를 구매한 경우
디자이너 컴포넌트 v14 라이선스를 구매하면, 각 도메인에 사용 가능한 2개의 디자이너 배포 키를 받을 수 있습니다.

Case2(다른 버전)>
SpreadJS v13 개발자 라이선스 및 "www.grapecity.co.kr"와 "dev.grapecity.co.kr"에 대해서 2개의 배포 라이선스를 구매한 경우
SpreadJS v14 개발자 라이선스와 v14 버전 배포 라이선스로 업그레이드를 해야, 디자이너 컴포넌트 v14 배포 키를 받을 수 있습니다.

SpreadJS와 디자이너 컴포넌트에서는 매크로, VBA 지원이 되나요?

아쉽게도 매크로와 VBA는 데스크톱 Excel에 국한된 기능으로 웹 상에서는 기술적으로 지원이 어렵습니다. 이는 다른 구글 시트, MS 웹 엑셀 등 일반적인 웹에서 제공하는 엑셀 서비스에서도 동일합니다.

다만, 사전에 사용했던 매크로의 기능이 필요하신 경우, 동일한 코도 또는 동작에 대해서 JavaScript 코딩을 통해 직접 구현을 해서 만들어 보실 수 있습니다.

X

카카오톡 채널 추가를 통해 GrapeCity의 최신 정보를 빠르게 받아 보세요!