• 검색

SpreadJS 는 개발자가 자신의 스프레드시트를 디자인할 수 있도록 Excel과 유사한 독립 실행형 데스크톱 응용 프로그램을 제공합니다.  

또한, 이번에 출시하는 SpreadJS V14 부터 고도의 사용자 정의가 가능하고 유연하며 웹 응용 프로그램에 쉽게 포함할 수 있는 별도의 새로운 디자이너 애드온 컴포넌트를 제공합니다.

새 디자이너를 사용하면 최소한의 노력으로 이 인터페이스를 쉽게 추가할 수 있습니다.

SpreadJS 디자이너 컴포넌트

새 디자이너 UI는 이전 디자이너와 외관이 비슷하지만 유용성 및 사용자 정의 측면에서 이전 버전보다 상당히 업그레이드되었습니다.

다음 테이블에는 두 버전의 차이점이 강조 표시되어 있습니다.

디자이너 컴포넌트 사용

디자이너 사용법이 전보다 훨씬 쉬워졌습니다. 다음 단계에 따라 구성해 주기만 하면 됩니다.

1. 디자이너 컴포넌트가 SpreadJS에서 의존하는 SpreadJS용 필수 의존성을 추가합니다. 이 작업을 위해 다음과 같은 SpreadJS CSS 및 JS 파일을 참조해야 합니다.

   CSS

   gc.spread.sheets.xx.x.x.css

   JS

    gc.spread.sheets.xx.x.x.js

   여기서 xx.x.x는 응용 프로그램에서 사용되는 SpreadJS 빌드의 버전 번호입니다.

2. SpreadJS 디자이너에 필수적인 의존성 추가

   디자이너 컴포넌트에는 다음과 같은 CSS 및 JS 파일도 필요합니다.

   CSS

   gc.spread.sheets.designer.xx.x.x.min.css

   JS

   gc.spread.sheets.designer.resource.en.xx.x.x.min.js
   gc.spread.sheets.designer.xx.x.x.min.js

   여기서 xx.x.x는 응용 프로그램에서 사용되는 SpreadJS 빌드의 버전 번호입니다.

3. DOM 요소를 컨테이너로 추가 페이지에서 DOM 요소를 추가하여 디자이너를 위한 컨테이너의 기능을 하게 합니다.

   <div id="designerHost" style="width:100%; height:360px;border: 1px solid gray;"></div>

   
   

   디자이너 및 SpreadJS에 대한 라이선스 키를 다음과 같이 설정합니다.

   GC.Spread.Sheets.Designer.LicenseKey ="XXX";
   GC.Spread.Sheets.LicenseKey ="XXXX";

4. 디자이너 인스턴스화

   디자이너 구성자를 사용해 디자이너의 새 인스턴스를 만듭니다.

   vardesigner =newGC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));

    

디자이너 사용자 정의

디자이너 사용자 정의는 단순한 구성 파일을 업데이트하는 것 만큼이나 쉽습니다.

리본에서 일부 버튼을 제거하거나, 일부 탭을 숨기거나, 탭의 버튼을 다시 정렬하거나, 새 버튼을 추가해야 하는 경우 구성 파일이 모든 기본 사항을 포함합니다.

구성 파일을 업데이트하기 전에 먼저 디자이너의 구조 및 기본 구성 요소를 알아보겠습니다. 다음 이미지는 디자이너의 다양한 부분을 나타낸 것입니다.

다음 이미지는 구성 파일의 기본 구조를 나타낸 것입니다.

사용자 정의 명령은 다음 스크린샷에 나와 있는 것처럼 commandsMap을 사용해 등록할 수 있습니다.

디자이너 구성 업데이트 - 버튼 그룹 추가

디자이너 컴포넌트를 사용자 정의하는 것이 얼마나 쉬운지 알아보겠습니다. 다음 예시에서는 간단한 버튼을 추가하고 변경 사항을 서버에 저장할 것입니다.

1. 다음 스크린샷에 나와 있는 것처럼 "데이터 저장" 옵션을 "HOME" 리본의 "buttonGroups" 필드에 추가합니다.

2. 다음 코드와 같이 해당되는 명령을 commandMap에 등록합니다.

   

3. CSS 스타일 설정:

   .ribbon-button-welcome{
   background-image:url('./welcome.png'); background-size:35px35px;
   }

4. 디자이너 인스턴스를 만들 때 위와 같은 사용자 정의된 JSON 매개 변수를 전달합니다.

   vardesigner =newGC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config);

다음 스크린샷과 같이 사용자 정의 명령 옵션이 표시되어야 합니다.

JavaScript 프레임워크에서 디자이너 사용

이제 다양한 JS 프레임워크에 디자이너를 통합하는 방법을 알아보겠습니다.

1. Angular

2. React

3. Vue

Angular에서 SpreadJS 디자이너 사용

Angular에서 디자이너를 사용하는 것은 component.html 파일에서 모듈을 가져오고 디자이너 지시문을 추가하는 것만큼이나 쉽습니다.

다음 단계에 따라 Angular 응용 프로그램에서 디자이너를 추가하십시오.

1. 필수 노드 패키지 추가

   @grapecity/spread-excelio
   @grapecity/spread-sheets
   @grapecity/spread-sheets-barcode
   @grapecity/spread-sheets-charts
   @grapecity/spread-sheets-languagepackages
   @grapecity/spread-sheets-pdf
   @grapecity/spread-sheets-print
   @grapecity/spread-sheets-resources-ko
   @grapecity/spread-sheets-shapes
   @grapecity/spread-sheets-designer
   @grapecity/spread-sheets-designer-resources-en
   @grapecity/spread-sheets-designer-angular

2. 디자이너 및 리소스 모듈 가져오기

   import { DesignerModule } from '@grapecity/spread-sheets-designer-angular';
   import '@grapecity/spread-sheets-designer-resources-en';
   
   @NgModule({ declarations: [
   AppComponent
   ],
   imports: [
   BrowserModule, DesignerModule
   ],
   providers: [],
   bootstrap: [AppComponent]
   })
   export class AppModule { }

3. component.css 파일에 CSS 파일 가져오기

   @import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"; 
   @import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

4. component.html에 디자이너 태그 추가

   <designer [props]="props"></designer>

5. 디자이너를 구성하려면 속성에서 구성 개체를 아래와 같이 전달하면 됩니다.

   props = {
   styleInfo: "width: 100%; height: 100%", config: config
   };

    

React에서 SpreadJS 디자이너 사용

React에서 디자이너를 사용하는 것도 마찬가지로 쉽습니다. React 컴포넌트를 가져와 렌더링 메서드의 결과로 반환하기만 하면 됩니다.

다음 단계를 따르십시오.

1. 필수 노드 패키지 추가:

   @grapecity/spread-excelio 
   @grapecity/spread-sheets 
   @grapecity/spread-sheets-barcode 
   @grapecity/spread-sheets-charts 
   @grapecity/spread-sheets-languagepackages 
   @grapecity/spread-sheets-pdf 
   @grapecity/spread-sheets-print 
   @grapecity/spread-sheets-resources-ja 
   @grapecity/spread-sheets-shapes 
   @grapecity/spread-sheets-designer
   @grapecity/spread-sheets-designer-resources-en 
   @grapecity/spread-sheets-react 
   @grapecity/spread-sheets-designer-react

2. 필요한 모듈 가져오기:

   import {Designer} from '@grapecity/spread-sheets-designer-react'; 
   import '@grapecity/spread-sheets-designer-resources-en';
   import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css" 
   import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"

3. 디자이너 컴포넌트 렌더링:

   function App() { return (
   <Designer styleInfo = {{width: "1500px", height: '90vh'}}></Designer>
   );
   }

Vue에서 SpreadJS 디자이너 사용

다음 단계에 따라 Vue 응용 프로그램에서 디자이너를 추가하십시오.

1. 필수 노드 패키지 추가:

   @grapecity/spread-excelio 
   @grapecity/spread-sheets 
   @grapecity/spread-sheets-barcode 
   @grapecity/spread-sheets-charts 
   @grapecity/spread-sheets-languagepackages 
   @grapecity/spread-sheets-pdf 
   @grapecity/spread-sheets-print 
   @grapecity/spread-sheets-resources-ja 
   @grapecity/spread-sheets-shapes 
   @grapecity/spread-sheets-designer
   @grapecity/spread-sheets-designer-resources

2. 필요한 모듈 가져오기:

   import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
   import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'; 
   import { Designer } from '@grapecity/spread-sheets-designer-vue';
   import '@grapecity/spread-sheets-designer-resources-en';

3. 템플릿에서 디자이너 태그 추가

   <template>
   <div id="app">
   <gc-spread-sheets-designer
   :styleInfo='styleInfo'
   :config='config'>
   </gc-spread-sheets-designer>
   </div>
   </template>

4. 스크립트 부분에서 구성을 다음과 같이 정의:

   export default { 
   name: 'App',
   data: function () { 
    return {
       styleInfo: {height:'800px', width: '1200px', border: 'solid red 1px'},
       config: null,
     };
    },
   }

   Angular, React, Vue 프로젝트를 여기에서 다운로드할 수 있습니다. 

디자이너 컴포넌트 라이선싱

디자이너 컴포넌트는 SpreadJS와 별도로 라이선싱됩니다. 응용 프로그램에서 디자이너 컴포넌트를 사용하려면 다음 두 가지 라이선스가 필요합니다.

1. SpreadJS 개발자 라이선스

2. SpreadJS 배포 라이선스

3. Spread 디자이너 컴포넌트 라이선스

배포 라이선스는 별도로 구매해야 합니다.

디자이너 라이선스

디자이너 컴포넌트를 개발하기 위해서는, 먼저, SpreadJS의 개발자 라이선스가 필요합니다. 또한, 배포를 위해서는 기본적으로 SpreadJS 라이선스와 함게 디자이너 컴포넌트 라이선스를 별도 구매하셔야 합니다.

SpreadJS 배포를 위해 등록한 동일한 IP주소 또는 hostname으로 디자이너 컴포넌트 배포를 위한 Key를 제공해드립니다. (동일한 버전에 한하여)

추가 라이선싱 정보는 GrapeCity로 연락부탁드립니다.

• 대표번호: 1670-0583

• 영업문의: sales-kor@grapecity.com

• 기술문의: dev.mescius.co.kr || support-kor@grpaecity.com