배포 및 라이선싱 JS 프레임워크 별 배포 라이선스 적용 방법 - PureJS, React, Vue, Angular
추천0
페이지 정보
작성자 GCK루카스
작성일 2023-02-09 14:15 조회 439회
댓글 0건
본문
관련링크
이번 포스팅에서는 프론드앤드 개발자들에게 인기 있는 자바스크립트(JavaScript) 프레임워크인 React(리액트), Vue(뷰), Angular(앵귤러)와 일반적으로 개발 시에 많이 사용하는 PureJS(일반 자바스크립트 구조)환경에서, SpreadJS의 "배포 라이선스 키를 적용"하는 방법에 대해 안내합니다.
* 배포 라이선스를 적용하지 않고 특정 도메인/URL에 배포하는 경우, 라이선스 에러와 함께 SpreadJS 컨트롤이 보이지 않습니다.
들어가기 전에, 각각의 프레임워크 별로 SpreadJS 컨트롤을 적용하고 개발하는 방법을 배우고 싶으신 경우, 아래의 글들을 참고해주세요
[SpreadJS 시작하기]
[SpreadJS 배포 라이선스 구매 및 등록 방법 ]
- SpreadJS 라이선스 구매 가이드
- SpreadJS 배포 라이선싱 등록 방법 안내 - PureJS 환경
(React, Vue, Angular 의 경우, 아래의 글을 참고해주세요)
1. PureJS에서 SpreadJS 배포 라이선스 적용하기
JSP, PHP 또는 순수 HTML/JS 환경을 사용하시는 경우, 아래의 방법을 통해서 배포 라이선스 키를 적용할 수 있습니다.
아래와 같이 SpreadJS 배포 라이선스에 대한 참조를 추가합니다.
배포 라이선스는 SpreadJS가 초기화되기 전에 참조되어야 합니다.
<script src="./scripts/gc.spread.sheets.all.xx.x.x.min.js" type="application/javascript"></script> <script> GC.Spread.Sheets.LicenseKey = "받으신 배포 라이선스키 입력"; </script>
또는, JavaScript 파일에 라이선스 정보를 입력하여, 적용할 수 있습니다.
1) Licensekey.js 파일 생성 후, 라이선스 키 입력
GC.Spread.Sheets.LicenseKey = "받으신 배포 라이선스키 입력";
2) Script 코드로 Licensekey.js 파일 불러오기
<script src="./scripts/gc.spread.sheets.all.xx.x.x.min.js" type="application/javascript"></script>
<script src="./scripts/licensekey.js" type="application/javascript"></script>
<script>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var activeSheet = spread.getActiveSheet();
}
</script>
2. React에서 SpreadJS 배포 라이선스 적용하기
* SpreadJS는 React 16, 17, 18 버전을 지원합니다.
아래와 같이 App.js 파일에 배포 라이선스를 선언합니다.
React 환경에서는 GC.Spread.Sheets와 ExcelIO 모두 라이선스를 추가해야 합니다.
import React from 'react';
import './App.css';
import GC from '@grapecity/spread-sheets';
import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react';
import * as ExcelIO from "@grapecity/spread-excelio";
import saveAs from 'file-saver';
GC.Spread.Sheets.LicenseKey = "받으신 배포 라이선스 키 입력";
ExcelIO.LicenseKey = "받으신 배포 라이선스 키 입력";
class App extends React.Component {
,,,,,,
Excel IO에 대한 전체 코드는 아래 도움말에서 확인 가능합니다.
3. Vue에서 SpreadJS 배포 라이선스 적용하기
* Vue3, Vue2 모두 동일합니다.
아래와 같이 App.vue 파일에 배포 라이선스를 선언합니다.
Vue 환경에서는 GC.Spread.Sheets와 ExcelIO 모두 라이선스를 추가해야 합니다.
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@grapecity/spread-sheets";
import * as ExcelIO from "@grapecity/spread-excelio";
import { saveAs } from "file-saver";
GC.Spread.Sheets.LicenseKey = "받으신 배포 라이선스 키 입력";
ExcelIO.LicenseKey = "받으신 배포 라이선스 키 입력";
export default {
,,,,,,Excel IO에 대한 전체 코드는 아래 도움말에서 확인 가능합니다.
4. Angular에서 SpreadJS 배포 라이선스 적용하기
아래와 같이 app.component.ts 파일에 배포 라이선스를 선언합니다.
Angular 환경에서는 GC.Spread.Sheets와 ExcelIO 모두 라이선스를 추가해야 합니다.
import { Component, ViewChild } from '@angular/core';
import * as GC from '@grapecity/spread-sheets';
import * as ExcelIO from '@grapecity/spread-excelio';
import { saveAs } from 'file-saver';
GC.Spread.Sheets.LicenseKey = "받으신 배포 라이선스 키 입력";
(<any>ExcelIO).LicenseKey = "받으신 배포 라이선스 키 입력";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
,,,,,,
ExcelIO에 대한 전체 코드는 아래 도움말에서 확인 가능합니다.
이외에도 궁금하신 내용이 있는 경우, 에 문의를 남겨주시기 바랍니다.
감사합니다.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
