Nuxt에서 Excel 개발하기

이번 포스팅에서는 Vue 개발자들이 많이 사용하는 Nuxt.js v3 프레임워크에서 Excel 화면과 Excel 기능을 개발할 수 있는 SpreadJS JavaScript Excel UI 컨트롤을 사용하는 방법에 대해 설명합니다.

Nuxt.js v3.15.2 기준으로 작성되었습니다.

[SpreadJS - Nuxt3 Excel 시작하기 샘플 다운로드]

아래 Nuxt.js 샘플 프로젝트를 다운 받아, 아래 이미지와 같이 Nuxt.js에서 Excel을 개발 할 수 있습니다. 

• Nuxt.js에서 SpreadJS 시작하기 샘플 다운로드

---

Nuxt.js v3 앱 생성하기

1. Nuxt.js 프로젝트를 생성하려면 명령 프롬프트나 터미널에서 다음 명령을 실행합니다.

   npx nuxi init nuxt3WithSJS

2. 터미널에 다음 명령을 입력합니다.

   cd nuxt3WithSJS
   npm run dev

3. 브라우저를 사용하여 다음 링크를 엽니다. 그러면 Nuxt.js의 환영 페이지가 표시됩니다.

   http://localhost:3000/

   

---

SpreadJS Vue Excel npm 패키지 설치

1. SpreadJS 패키지를 설치합니다. 

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

   애플리케이션 루트 폴더에 components라는 폴더가 없으면 새로 만듭니다.

2. components 폴더에 JavaScript XML 파일 SpreadSheet.vue를 만들고 다음 코드를 추가합니다. 컴포넌트를 초기화하기 전에 SpreadJS 라이선스를 입력할 수 있습니다.

   <template>
       <div>
           <gc-spread-sheets Class='spread-host' @workbookInitialized="initWorkbook">
           </gc-spread-sheets>
       </div>
   </template>
       
   <script>
       import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
       import { GcSpreadSheets } from '@mescius/spread-sheets-vue'
       import * as GC from "@mescius/spread-sheets";
   
       // SpreadJS 라이선싱
       // var SpreadJSKey = "xxx";          // 라이선스 입력
       // GC.Spread.Sheets.LicenseKey = SpreadJSKey;
   
       export default {
           components: {
               GcSpreadSheets
           },
           methods: {
               initWorkbook(spread) {
                   
               }
           }    
       }
   </script>
   
   <style scoped>
       .spread-host {
           width: 600px;
           height: 600px;
       }
   </style>

3. app.vue 파일의 기본 내용을 다음 코드로 바꿉니다. 

   <template>
   <div>
       <h1>
           Nuxt.js v3 + SpreadJS 데모
       </h1>
       <SpreadSheet />
   </div>
   </template>

4. nuxt.config.ts 파일을 아래와 같이 변경합니다.

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

---

Nuxt v3 Excel 앱 실행 및 테스트

npm run dev 명령을 사용하여 애플리케이션을 실행할 수 있습니다. 

npm run dev

기본적으로 프로젝트는 http://localhost:3000/에서 실행됩니다.

---

Nuxt 3 SpreadJS Excel 한국어 설정하기

1. npm을 사용하여 한국어 리소스 패키지를 설치합니다.

   npm install @mescius/spread-sheets-resources-ko

2. SpreadSheet.vue의 script 태그 내부에 아래의 코드를 입력하여 SpreadJS 패키지와 한국어 리소스 패키지를 import 합니다.

   import '@mescius/spread-sheets-resources-ko';

3. 이어서 아래의 코드를 입력합니다.

   GC.Spread.Common.CultureManager.culture("ko-kr");

4. 아래와 같이 한국어가 적용된 것을 확인하실 수 있습니다.

   

▶ SpreadJS 데모 - 지역화 및 세계화 자세히 보기

---

Nuxt3 Excel 스프레드시트 초기화 및 값 설정

1. initWorkbook함수에 아래와 같이 코드를 입력하여 스프레드시트를 초기화합니다.

   initWorkbook(spread) {
       let sheet = spread.getActiveSheet();
   }

2. 아래와 같이 initWorkbook 함수를 작성하여 원하는 위치의 셀에 값을 설정해줄 수 있습니다.

   initWorkbook(spread) {
       let sheet = spread.getActiveSheet();
                   
       sheet.setValue(1, 1, "값 설정하기");
       // 값 설정 - Number : B3에 "Number" 라는 텍스트를, C3에 23이라는 숫자를 삽입합니다.
       sheet.setValue(2, 1, "Number");
       sheet.setValue(2, 2, 23);
       // 값 설정 - Text : B4에 "Text" 라는 텍스트를, C4에 "MESCIUS"라는 텍스트를 삽입합니다.
       sheet.setValue(3, 1, "Text");
       sheet.setValue(3, 2, "MESCIUS");
       // 값 설정 - Text : B5에 "Datetime" 이라는 텍스트를, C5에 오늘 날짜를 삽입합니다.
       sheet.setValue(4, 1, "Datetime");
       sheet.getCell(4, 2).value(new Date()).formatter("yyyy-mm-dd");
   }

3. 아래와 같이 지정한 셀에 지정한 값이 삽입되어 있는 것을 확인하실 수 있습니다.

---

Nuxt3 Excel 셀 스타일 설정

SpreadJS에서 제공하는 함수를 사용하면 데이터를 보다 유용하고 매력적으로 표시할 수 있습니다.

1. 아래와 같이 시트의 스타일을 설정합니다. 위에서 작성하던 initWorkbook 함수 내부에 이어서 작성합니다.

   // 스타일 설정
   // B열, C열의 너비를 200으로 설정합니다.
   sheet.setColumnWidth(1, 200);
   sheet.setColumnWidth(2, 200);
   // B2:C2의 배경색과 글자색을 설정합니다.
   sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
   // B4:C4의 배경색을 설정합니다.
   sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
   // B2:C2의 셀을 병합합니다.
   sheet.addSpan(1, 1, 1, 2);
   // 각 범위에 테두리를 설정합니다.
   sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
       all: true
   });
   sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
       inside: true
   });
   // B2:C2의 병합된 셀에 수직 가운데 정렬을 설정합니다.
   sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);

2. 아래와 같이 스타일이 적용된 것을 확인하실 수 있습니다.

아래 링크를 통해 사용자 정의 가능한 다양한 설정에 대해 학습하실 수 있습니다.

▶ SpreadJS 데모 - 워크시트 설정 자세히 보기

---

Nuxt3 Excel 데이터 바인딩

간단하면서도 효율적으로 데이터를 바인딩하는 방법에 대해 설명합니다.

해당 작업은 새로운 시트를 열어서 시작하도록 하겠습니다.

위에서 작성하던 initWorkbook 함수 내부에 이어서 작성합니다.

1. addSheet 메서드를 사용하여 새로운 시트를 추가합니다.

   spread.addSheet(1);

2. getSheet 메서드를 사용하여 추가한 시트를 가져옵니다.

   var sheet2 = spread.getSheet(1);

3. person이라는 데이터를 입력해 줍니다.

   var person = { name: '홍길동', age: 25, gender: '남', address: { postcode: '10001' } };

4. "new GC.Spread.Sheets.Bindings.CellBindingSource(person);"를 사용하여 셀 바인딩 소스를 설정합니다.

   var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);

5. 그런 다음 setBindingPath 메서드를 사용하여 지정된 시트 영역에 지정된 셀의 바인딩 경로를 설정합니다.

   sheet2.setBindingPath(2, 2, 'name');
   sheet2.setBindingPath(3, 2, 'age');
   sheet2.setBindingPath(4, 2, 'gender');
   sheet2.setBindingPath(5, 2, 'address.postcode');

6. setDataSource 메서드를 사용하여 시트의 데이터 소스를 설정합니다.

   sheet2.setDataSource(source);

7. 여기까지 작성한 initWorkbook 함수의 전체 코드는 아래와 같습니다.

   initWorkbook(spread) {
       let sheet = spread.getActiveSheet();
   
       sheet.setValue(1, 1, "값 설정하기");
       // 값 설정 - Number : B3에 "Number" 라는 텍스트를, C3에 23이라는 숫자를 삽입합니다.
       sheet.setValue(2, 1, "Number");
       sheet.setValue(2, 2, 23);
       // 값 설정 - Text : B4에 "Text" 라는 텍스트를, C4에 "MESCIUS"라는 텍스트를 삽입합니다.
       sheet.setValue(3, 1, "Text");
       sheet.setValue(3, 2, "MESCIUS");
       // 값 설정 - Text : B5에 "Datetime" 이라는 텍스트를, C5에 오늘 날짜를 삽입합니다.
       sheet.setValue(4, 1, "Datetime");
       sheet.getCell(4, 2).value(new Date()).formatter("yyyy-mm-dd");
   
       // 스타일 설정
       // B열, C열의 너비를 200으로 설정합니다.
       sheet.setColumnWidth(1, 200);
       sheet.setColumnWidth(2, 200);
       // B2:C2의 배경색과 글자색을 설정합니다.
       sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
       // B4:C4의 배경색을 설정합니다.
       sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
       // B2:C2의 셀을 병합합니다.
       sheet.addSpan(1, 1, 1, 2);
       // 각 범위에 테두리를 설정합니다.
       sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
           all: true
       });
       sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
           inside: true
       });
       // B2:C2의 병합된 셀에 수직 가운데 정렬을 설정합니다.
       sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
   
       // 데이터 바인딩
       // 새로운 시트를 추가합니다.
       spread.addSheet(1);
   
       // 추가한 시트를 가져옵니다.
       var sheet2 = spread.getSheet(1);
   
       // 데이터를 입력합니다.
       var person = { name: '홍길동', age: 25, gender: '남', address: { postcode: '10001' } };
   
       // 셀 바인딩 소스를 설정합니다.
       var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
   
       // 지정된 시트 영역에 지정된 셀의 바인딩 경로를 설정합니다.
       sheet2.setBindingPath(2, 2, 'name');
       sheet2.setBindingPath(3, 2, 'age');
       sheet2.setBindingPath(4, 2, 'gender');
       sheet2.setBindingPath(5, 2, 'address.postcode');
   
       // 시트의 데이터 소스를 설정합니다.
       sheet2.setDataSource(source);
   }

   
   

8. 애플리케이션을 실행하여 Sheet2를 클릭하면, 아래와 같은 결과 화면을 확인하실 수 있습니다.

---

[SpreadJS - Nuxt3 Excel 시작하기 샘플 다운로드]

샘플을 다운로드하여 전체 코드를 확인해 보실 수 있습니다.

아래 샘플은 node_modules 폴더가 포함되어 있지 않으므로, npm install 후 실행시켜주시기 바랍니다.

• Nuxt.js 에서 SpreadJS 시작하기 샘플 다운로드

실행 : 

npm install
npm run dev

---

지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

SpreadJS 다운로드

• SpreadJS 공식 홈페이지
• SpreadJS 튜토리얼 및 샘플
• SpreadJS Q&A
• SpreadJS FAQ