Nuxt에서 SpreadJS 시작하기

SpreadJS는 Nuxt 3 및 Nuxt 4와 원활하게 작동합니다.

이 튜토리얼에서는 Nuxt 프로젝트에 SpreadJS를 통합하는 방법, 클라이언트 사이드 렌더링(CSR)으로 설정하는 방법, 그리고 선택적으로 Excel과 유사한 편집 도구를 제공하는 Designer 컴포넌트를 활성화하는 방법을 설명합니다.

Nuxt 앱에 SpreadJS 통합하기

Step 1: Nuxt 프로젝트 설정

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

새로운 프로젝트로 시작하려면 다음 명령을 실행하세요.

npm create nuxt@latest nuxt-with-spreadjs
cd nuxt-with-spreadjs
npm install

그다음 애플리케이션을 실행합니다.

npm run dev

기본 Nuxt 앱이 정상적으로 실행되는 것(http://localhost:3000)을 확인한 후 SpreadJS 통합을 시작할 수 있습니다.

Step 2: SpreadJS 설치 및 구성

1. SpreadJS 패키지 설치

   애플리케이션 루트 폴더에 components 폴더가 없다면 새로 생성합니다.

   npm install --save @mescius/spread-sheets-vue

2. SpreadJS 컴포넌트 추가

   components 폴더에 Spreadsheet.vue 파일을 생성하고 아래와 같이 컴포넌트를 정의합니다.SpreadJS 컨트롤을 초기화하기 전에 라이선스 키를 입력할 수도 있습니다.

   <template>
     <div>
       <gc-spread-sheets class="hostClass" @workbookInitialized="initSpread">
         <gc-worksheet> </gc-worksheet>
       </gc-spread-sheets>
     </div>
   </template>
   
   <script setup>
   import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
   import { GcSpreadSheets, GcWorksheet } from "@mescius/spread-sheets-vue";
   import * as GC from "@mescius/spread-sheets";
   
   var data = [
     {
       jobTitleName: "Developer",
       preferredFullName: "Romin Irani",
       region: "CA",
       phoneNumber: "408-1234567",
     },
     {
       jobTitleName: "Developer",
       preferredFullName: "Neil Irani",
       region: "CA",
       phoneNumber: "408-1111111",
     },
     {
       jobTitleName: "Program Directory",
       preferredFullName: "Tom Hanks",
       region: "CA",
       phoneNumber: "408-2222222",
     },
   ];
   
   let initSpread = function (spread) {
     var sheet = spread.getSheet(0);
     sheet.setDataSource(data);
   };
   </script>
   <style scoped>
   .hostClass {
     width: 600px;
     height: 600px;
   }
   </style>

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

   app.vue의 기본 내용을 아래와 같이 교체합니다.

   <template>
     <div>
         <h1>
             Jamstack 애플리케이션에 스프레드시트 추가하기
         </h1>
         <p>
             Nuxt.JS + SpreadJS 데모
         </p>
         <SpreadSheet />
     </div>
   </template>

4. Nuxt 설정 업데이트 (선택 사항)

   // https://nuxt.com/docs/api/configuration/nuxt-config
   export default defineNuxtConfig({
     //...
   
     ssr: false,
     components: true,
   })

Step 3: 실행 및 통합 확인

npm run dev

애플리케이션은 http://localhost:3000 에서 확인할 수 있으며, Nuxt 앱 안에서 SpreadJS 컴포넌트가 렌더링되어야 합니다.

Step 4 (선택 사항): SpreadJS Designer 컴포넌트 추가

Designer 컴포넌트를 추가하면 Excel 스타일의 서식 지정 및 편집 명령을 제공하여 사용자 인터페이스를 향상시킬 수 있습니다.

자세한 설정 방법은 SpreadJS 디자이너 컴포넌트를 참고하세요.

1. 패키지 설치

   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

2. 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 GCDesigner from "@mescius/spread-sheets-designer";
   import GcSpreadSheetsDesigner from "@mescius/spread-sheets-designer-vue";
   
   const styleInfo = { height: "85vh", width: "100%" };
   const config = GCDesigner.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, "SpreadJS Designer에 오신 것을 환영합니다!");
     }
   }
   </script>
   
   <style scoped>
   #gc-designer-container {
     width: 100%;
     height: 100%;
   }
   </style>

3. 실행 및 통합 확인

   npm run dev