Angular

SpreadJS 디자이너 컴포넌트를 Angular 애플리케이션에 추가하려면 다음 단계를 수행할 수 있습니다.

1. 명령 프롬프트에 다음 명령어를 입력하여 Angular 프로젝트를 생성하세요.

   npm install -g @angular/cli
   ng new designercomponent --style css --ssr false
   cd designercomponent

2. SpreadJS 디자이너 컴포넌트를 사용하려면 프로젝트에 다음 SpreadJS 모듈을 임포트하세요.

   npm install @mescius/spread-sheets
   npm install @mescius/spread-sheets-angular
   npm install @mescius/spread-sheets-shapes
   npm install @mescius/spread-sheets-charts
   npm install @mescius/spread-sheets-slicers
   npm install @mescius/spread-sheets-print
   npm install @mescius/spread-sheets-formula-panel
   npm install @mescius/spread-sheets-barcode
   npm install @mescius/spread-sheets-pdf
   npm install @mescius/spread-sheets-pivot-addon
   npm install @mescius/spread-sheets-tablesheet
   npm install @mescius/spread-sheets-ganttsheet
   npm install @mescius/spread-sheets-reportsheet-addon
   npm install @mescius/spread-sheets-languagepackages
   npm install @mescius/spread-sheets-io
   npm install @mescius/spread-excelio
   npm install @mescius/spread-sheets-designer
   npm install @mescius/spread-sheets-designer-resources-ko
   npm install @mescius/spread-sheets-designer-angular

3. 다음 코드 조각을 사용하여 app.component.css 파일에 CSS 파일을 임포트하세요.

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

4. 다음 코드 조각을 사용하여 app.component.html 파일에 designer 태그를 추가하세요.

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

5. 디자이너 컴포넌트를 구성하려면 app.component.ts 파일에서 아래와 같이 props 매개변수를 전달할 수 있습니다.

   import { Component, ViewEncapsulation } from '@angular/core';
   import * as GC from '@mescius/spread-sheets';
   import "@mescius/spread-sheets-shapes";
   import "@mescius/spread-sheets-charts";
   import "@mescius/spread-sheets-slicers";
   import "@mescius/spread-sheets-print";
   import "@mescius/spread-sheets-formula-panel";
   import "@mescius/spread-sheets-barcode";
   import "@mescius/spread-sheets-pdf";
   import "@mescius/spread-sheets-pivot-addon";
   import "@mescius/spread-sheets-tablesheet";
   import "@mescius/spread-sheets-ganttsheet";
   import "@mescius/spread-sheets-reportsheet-addon";
   import "@mescius/spread-sheets-io";
   import '@mescius/spread-sheets-designer-resources-ko';
   import '@mescius/spread-sheets-designer';
   import * as GcDesigner from '@mescius/spread-sheets-designer';
   import { DesignerModule } from '@mescius/spread-sheets-designer-angular';
   
   @Component({
     selector: 'app-root',
     standalone: true,
     imports: [DesignerModule],
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
     encapsulation: ViewEncapsulation.None
   })
   export class AppComponent {
       props = {
          stylelnfo: "width: 100%; height: 98vh; margin-top: 10px", 
       };
   }

6. 애플리케이션을 저장하고 실행하세요.

   npm start

SpreadJS 인스턴스에 접근하기

designerInitialized 이벤트를 사용하여 SpreadJS 인스턴스에 접근할 수도 있습니다. 위의 1번부터 4번까지 단계를 수행한 후 다음을 계속 진행하세요:

1. 다음 코드 조각을 사용하여 app.component.html 파일에 designerInitialized 이벤트 리스너를 추가하세요.

   <designer (designerInitialized)="afterDesignerInit($event)" [props]="props"></designer>

2. 다음 코드 조각을 사용하여 app.component.ts 파일을 업데이트하세요.

   export class AppComponent {
       props = {
          styleInfo: "width: 100%; height: 700px",
          config: null
       }
       afterDesignerInit(e: { designer:GcDesigner.Spread.Sheets.Designer.Designer }) {
   
          // this is hosted spread instance
          var workbook = e.designer.getWorkbook() as GC.Spread.Sheets.Workbook;
          var sheet = workbook.getActiveSheet();
          sheet.setValue(1, 1, 'Test');
       }
   }

3. 애플리케이션을 저장하고 실행하세요.

   npm start

라이선스 적용하기

정식 라이선스를 적용하면 SpreadJS 디자이너 컴포넌트의 모든 기능을 사용할 수 있습니다. SpreadJS와 디자이너 컴포넌트에 대한 라이선스 키를 각각 설정해야 하며, 다음 코드 조각을 사용하여 설정할 수 있습니다.

import { Component, ViewEncapsulation } from '@angular/core';
import * as GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-charts";
import "@mescius/spread-sheets-slicers";
import "@mescius/spread-sheets-print";
import "@mescius/spread-sheets-formula-panel";
import "@mescius/spread-sheets-barcode";
import "@mescius/spread-sheets-pdf";
import "@mescius/spread-sheets-pivot-addon";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-ganttsheet";
import "@mescius/spread-sheets-reportsheet-addon";
import "@mescius/spread-sheets-io";
import '@mescius/spread-sheets-designer-resources-ko';
import '@mescius/spread-sheets-designer';
import * as GcDesigner from '@mescius/spread-sheets-designer';
import { DesignerModule } from '@mescius/spread-sheets-designer-angular';
 
var sjsLicense = "sjs-distribution-key";
GC.Spread.Sheets.LicenseKey = sjsLicense;
 
(GC.Spread.Sheets as any).Designer.LicenseKey = "designer-component-distribution-key";