Excel IO 요소

SpreadJS에서 Excel IO 요소를 Vue와 함께 사용하면, Excel 시트를 웹 페이지에 빠르게 렌더링하고 표시할 수 있으며, 불편함 없이 가져오기 및 내보내기 작업도 수행할 수 있습니다.

Vue 3

1. Vue 프로젝트 생성하기

   명령 프롬프트를 열고 다음 명령어를 입력하여 간단한 Vue 프로젝트를 생성하세요.

   npm install -g @vue-cli
   vue create sjs-vue-app :: Here, select Vue 3
   cd sjs-vue-app
   npm run serve

2. 프로젝트에 SpreadJS Vue 모듈 임포트하기

   다음 명령어를 사용하여 프로젝트에 SpreadJS Vue 모듈을 임포트하세요:

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

3. 프로젝트에 Excel IO Vue 모듈과 FileSaver Vue 모듈 임포트하기

   다음 명령어를 사용하여 프로젝트에 Excel I/O 및 file-saver 모듈을 임포트하세요:

   npm install @mescius/spread-excelio
   npm install file-saver --save

4. Vue 애플리케이션에서 Excel IO 사용하기

   Vue 애플리케이션에서 Excel IO 요소를 사용하기 위해 App.vue 파일을 아래와 같이 수정하세요:

   <template>
     <div>
       <gc-spread-sheets class="spread-host" @workbookInitialized="initSpread">
       </gc-spread-sheets>
       <div class="options-container">
         <div class="option-row">
           <div class="inputContainer">
             <input
               type="file"
               id="fileDemo"
               class="input"
               @change="changeFileDemo"
             />
             <input
               type="button"
               id="loadExcel"
               value="import"
               class="button"
               @click="loadExcel"
             />
           </div>
           <div class="inputContainer">
             <input
               id="exportFileName"
               value="export.xlsx"
               class="input"
               @change="changeExportFileName"
             />
             <input
               type="button"
               id="saveExcel"
               value="export"
               class="button"
               @click="saveExcel"
             />
           </div>
         </div>
       </div>
     </div>
   </template>
   
   <script>
     import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
     import * as GC from "@mescius/spread-sheets";
     import * as ExcelIO from "@mescius/spread-excelio";
     import { saveAs } from "file-saver";
   
     var SpreadJSKey = "xxxx";
     GC.Spread.Sheets.LicenseKey = SpreadJSKey;
   
     // ExcelIO 모듈은 동일한 라이선스 키를 사용하여 별도로 라이선스를 등록해야 합니다.
     ExcelIO.LicenseKey = SpreadJSKey;
   
     export default {
       name: "App",
       methods: {
         initSpread: function (spread) {
           this.spread = spread;
           let sheet = this.spread.getActiveSheet();
           sheet
             .getCell(0, 0)
             .vAlign(GC.Spread.Sheets.VerticalAlign.center)
             .value("SpreadJS");
         },
         changeFileDemo(e) {
           this.importExcelFile = e.target.files[0];
         },
         changeExportFileName(e) {
           this.exportFileName = e.target.value;
         },
         loadExcel() {
           let spread = this.spread;
           let excelIo = new ExcelIO.IO();
           let excelFile = this.importExcelFile;
           excelIo.open(
             excelFile,
             function (json) {
               spread.fromJSON(json);
             },
             function (error) {
               console.log(error);
             }
           );
         },
         saveExcel() {
           let spread = this.spread;
           let excelIo = new ExcelIO.IO();
           let fileName = this.exportFileName || "export";
           if (fileName.substr(-5, 5) !== ".xlsx") {
             fileName += ".xlsx";
           }
           let json = spread.toJSON();
           excelIo.save(
             json,
             function (blob) {
               saveAs(blob, fileName);
             },
             function (error) {
               console.log(error);
             }
           );
         },
       },
     };
   </script>
   
   <style>
     .spread-host {
       width: 100%;
       height: 600px;
     }
     .inputContainer {
       width: 100%;
       height: auto;
       border: 1px solid #eee;
       padding: 6px 12px;
       margin-bottom: 10px;
       box-sizing: border-box;
     }
     .options-container {
       width: 280px;
       padding: 12px;
       height: 100%;
       box-sizing: border-box;
       background: #fbfbfb;
       overflow: auto;
     }
   </style>

5. SpreadJS Vue 컴포넌트 등록하기

   아래에 제공된 샘플 코드를 사용하여 main.js 파일을 수정하세요:

   import { createApp } from 'vue'
   import App from './App.vue'
   import { GcSpreadSheets, GcWorksheet, GcColumn } from '@mescius/spread-sheets-vue'
   
   let app = createApp(App);
   app.component('gc-spread-sheets', GcSpreadSheets);
   app.component('gc-worksheet', GcWorksheet);
   app.component('gc-column', GcColumn);
   app.mount("#app");

6. 애플리케이션을 저장하고 실행하기

   다음 명령어를 사용하여 새 프로젝트를 빌드하고 실행하세요.

   npm run serve