[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

NuxtJS

SpreadJS 디자이너 컴포넌트는 Nuxt 3 및 Nuxt 4와 원활하게 연동됩니다.

이 튜토리얼에서는 Nuxt 프로젝트에 SpreadJS 디자이너 컴포넌트를 통합하고, 클라이언트 측 렌더링을 구성하며, Excel과 유사한 편집 도구를 활성화하는 방법을 설명합니다.

Nuxt 앱에 SpreadJS 디자이너 컴포넌트 통합

1단계: Nuxt 프로젝트 설정

기존 Nuxt 3 또는 Nuxt 4 프로젝트를 사용할 수 있습니다.

새 프로젝트에서 시작하려면 다음 명령을 실행합니다.

npm create nuxt@latest nuxt-with-spreadjs-designer

터미널에 구성 관련 메시지가 표시되면 필요한 옵션을 선택하고 Enter 키를 눌러 확인합니다. 이 튜토리얼에서는 다음 옵션을 선택할 수 있습니다.

  • Template: Minimal

  • Package manager: npm

  • Initialize git repository: Yes

  • Would you like to browse and install modules?: No

터미널에서 프로젝트 설치 및 생성이 완료될 때까지 잠시 기다립니다. 그런 다음 터미널에 다음 명령을 입력합니다.

cd nuxt-with-spreadjs-designer
npm install

참고:

npm install 실행 시 Cannot find native binding 오류가 발생하거나 @rolldown/binding-* 패키지를 찾을 수 없는 경우 node_modules 폴더와 package-lock.json 파일을 제거한 다음 npm install을 다시 실행합니다.

그런 다음 앱을 실행합니다.

npm run dev

기본 Nuxt 앱이 실행되는지(http://localhost:3000) 확인한 후 SpreadJS 디자이너 컴포넌트 통합을 시작할 수 있습니다.

2단계: SpreadJS 디자이너 컴포넌트 설치 및 구성

  1. SpreadJS 디자이너 컴포넌트 패키지 설치

npm i --save @mescius/spread-sheets @mescius/spread-sheets-barcode @mescius/spread-sheets-charts @mescius/spread-sheets-datacharts-addon @mescius/spread-sheets-designer @mescius/spread-sheets-designer-resources-en @mescius/spread-sheets-designer-vue @mescius/spread-sheets-formula-panel @mescius/spread-sheets-ganttsheet @mescius/spread-sheets-io @mescius/spread-sheets-languagepackages @mescius/spread-sheets-pdf @mescius/spread-sheets-print @mescius/spread-sheets-pivot-addon @mescius/spread-sheets-reportsheet-addon @mescius/spread-sheets-shapes @mescius/spread-sheets-slicers @mescius/spread-sheets-tablesheet

  1. SpreadJS 디자이너 컴포넌트 추가

    Nuxt 프로젝트의 루트 폴더에 components 폴더가 없는 경우 해당 폴더를 만듭니다. components 폴더에 Spreadsheet.vue라는 파일을 만듭니다. 예를 들어 이 튜토리얼에서 파일 경로는 nuxt-with-spreadjs-designer/components/Spreadsheet.vue입니다. 다음과 같이 컴포넌트를 정의합니다.

<template>
    <div id="gc-designer-container">
        <gc-spread-sheets-designer :styleInfo="styleInfo" :config="config" :spreadOptions="spreadOptions"
            @designerInitialized="initDesigner" />
    </div>
</template>

<script setup>
import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import "@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.light.min.css";

import "@mescius/spread-sheets-print";
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-datacharts-addon";
import "@mescius/spread-sheets-slicers";
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-formula-panel";
import "@mescius/spread-sheets-io";
import "@mescius/spread-sheets-designer-resources-en";

import * as GC from "@mescius/spread-sheets";
import * as GCD from "@mescius/spread-sheets-designer";
import GcSpreadSheetsDesigner from "@mescius/spread-sheets-designer-vue";

// Optional: Set your SpreadJS license key and Designer Component license key
// GC.Spread.Sheets.LicenseKey = "sjs-distribution-key";
// GCD.Spread.Sheets.Designer.LicenseKey = "designer-component-distribution-key";

const styleInfo = { height: "85vh", width: "100%" };
const config = GCD.Spread.Sheets.Designer.DefaultConfig;
const spreadOptions = { sheetCount: 2 };

let designer = null;

function initDesigner(value) {
    designer = value;
    console.log("Designer initialized:", designer);

    const spread = designer.getWorkbook();
    if (spread) {
        const sheet = spread.getSheet(0);
        sheet.setValue(0, 0, "Welcome to SpreadJS Designer!");
    }
}
</script>

<style scoped>
#gc-designer-container {
    width: 100%;
    height: 100%;
}
</style>

  1. 메인 앱에서 컴포넌트 사용

    app.vue의 기본 내용을 다음과 같이 바꿉니다.

<template>
  <div>
    <h1>
      Nuxt.JS + SpreadJS Designer Component Demo
    </h1>
    <SpreadSheet />
  </div>
</template>

<script setup>
import SpreadSheet from "../components/Spreadsheet.vue";
</script>

  1. Nuxt 구성 업데이트(선택 사항)

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  //...

  ssr: false,
  components: true,
})

참고:

SpreadJS 디자이너 컴포넌트는 브라우저 API를 사용하며 클라이언트 측에서만 실행됩니다. SSR 모드에서 Nuxt를 사용하는 경우 SpreadJS 디자이너 컴포넌트를 <client-only> 태그로 감싸거나 클라이언트 전용 플러그인(예: plugins/spreadjs.client.ts)으로 등록합니다.

3단계: 통합 실행 및 확인

npm run dev

앱은 http://localhost:3000에서 사용할 수 있으며, Nuxt 앱 내에 SpreadJS 디자이너 컴포넌트가 렌더링됩니다.

image-20260707.3fea6e.png