JS 프레임워크에서 디자이너 컴포넌트 사용하기

디자이너컴포넌트 JS 프레임워크에서 디자이너 컴포넌트 사용하기

추천0

페이지 정보

작성자 GrapeCity

작성일 2022-06-21 15:07 조회 455회 댓글 0건

본문

관련링크

SpreadJS 디자이너 컴포넌트는 구글 시트, 온라인 MS Excel과 유사한 UI, 메뉴 구조 그리고 Excel의 기능을 웹 페이지 상에 구현하고자 하시는 분들을 위한 Front-end Excel 에디터입니다.

화면 구조부터 Excel 기능에 대한 컴포넌트를 제공하므로 자유롭게 사용자 정의할 수 있으며 임의로 확장할 수 있습니다.

세밀하게 사용자 정의 가능하며 유연한 이 추가 기능 컴포넌트에는 Angular, React, Vue Wrapper가 있어 이러한 모든 JavaScript 프레임워크에 쉽게 추가할 수 있습니다.

이 포스팅에서는 AngularJS, React, Vue 웹 응용 프로그램에 디자이너 컴포넌트를 추가하는 방법에 대해 알아봅니다. 또한 최소한의 노력으로 이 컴포넌트를 다양하게 사용자 정의하는 방법도 안내해 드리겠습니다.

JavaScript 프레임워크에서 디자이너 컴포넌트 사용하기

AngularJS

응용 프로그램을 만든 후 다음 단계를 따라 주세요.

다음 SpreadJS 모듈을 프로젝트에 가져옵니다.

npm install @grapecity/spread-excelio
npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-barcode
npm install @grapecity/spread-sheets-charts
npm install @grapecity/spread-sheets-languagepackages
npm install @grapecity/spread-sheets-pdf
npm install @grapecity/spread-sheets-print
npm install @grapecity/spread-sheets-shapes
npm install @grapecity/spread-sheets-pivot-addon
npm install @grapecity/spread-sheets-designer
npm install @grapecity/spread-sheets-designer-resources-en
npm install @grapecity/spread-sheets-angular
npm install @grapecity/spread-sheets-designer-angular

app.module.ts 파일에서 디자이너 및 리소스 모듈을 가져옵니다.

import '@grapecity/spread-sheets-designer-resources-en';
import { DesignerModule } from '@grapecity/spread-sheets-designer-angular';

app.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';

app.component.html
파일에서 디자이너가 초기화한 이벤트에 디자이너 태그 및 이벤트 리스너를 추가합니다.
```
<designer (designerInitialized)="afterDesignerInit($event)" [props]="props"></designer>
```

디자이너를 구성하도록 속성 매개 변수를 전달합니다. 또한 SpreadJS 인스턴스에 액세스하도록 디자이너를 초기화합니다.

export class AppComponent {
   props = {
      styleInfo: "width: 100%; height: 900px",
      config: null
  }
   designerInitialization(e: any) {
      //spread instance
      var workbook = e.designer.getWorkbook();
      var sheet = workbook.getActiveSheet();
      sheet.setValue(1, 1, 'Test');
  }
}

응용 프로그램을 저장하고 실행합니다.

React

디자이너 컴포넌트를 React 응용 프로그램에 추가하려면 다음 단계를 따라 주세요.

다음 SpreadJS 모듈을 프로젝트에 가져옵니다.

npm install @grapecity/spread-excelio
npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-barcode
npm install @grapecity/spread-sheets-charts
npm install @grapecity/spread-sheets-languagepackages
npm install @grapecity/spread-sheets-pdf
npm install @grapecity/spread-sheets-print
npm install @grapecity/spread-sheets-shapes
npm install @grapecity/spread-sheets-pivot-addon
npm install @grapecity/spread-sheets-designer
npm install @grapecity/spread-sheets-designer-resources-en
npm install @grapecity/spread-sheets-angular
npm install @grapecity/spread-sheets-designer-angular

App.js 파일에서 필수 모듈을 가져옵니다.

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

다음 코드를 사용하여 디자이너 컴포넌트를 렌더링합니다.

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

응용 프로그램을 저장하고 실행합니다.

Vue

디자이너 컴포넌트를 Vue 응용 프로그램에 추가하려면 다음과 같이 수행하십시오.

다음 SpreadJS 모듈을 프로젝트에 가져옵니다.

npm install @grapecity/spread-excelio
npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-barcode
npm install @grapecity/spread-sheets-charts
npm install @grapecity/spread-sheets-languagepackages
npm install @grapecity/spread-sheets-pdf
npm install @grapecity/spread-sheets-print
npm install @grapecity/spread-sheets-shapes
npm install @grapecity/spread-sheets-pivot-addon
npm install @grapecity/spread-sheets-designer
npm install @grapecity/spread-sheets-designer-resources-en
npm install @grapecity/spread-sheets-angular
npm install @grapecity/spread-sheets-designer-angular

필수 모듈을 가져옵니다.

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';

아래처럼 디자이너 태그를 추가합니다.

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

App.vue 파일에서 디자이너를 구성하고 초기화합니다.

export default {
 name: 'App',
 data: function () {
   return {
     styleInfo: { height: '800px', width: '1200px', border: 'solid black 1px' },
     config: null,
     designer: null
  }
},
 methods: {
   designerInitialized (value) {
     this.designer = value
  }
}
}