"Excel 가져오기 기능을 추가할 수 있나요?"

장시간 소프트웨어를 개발한 경우 관리자로부터 한 번 이상 질문을 들어봤을 것입니다.

전문 기술 지식을 갖추지 않은 대중의 경우 Excel 가져오기/내보내기에 대한 질문은 큰 문제가 아닌 것처럼 들립니다.

얼마나 어렵겠습니까, 그렇죠?

하지만 너무나 자주 이 문제는 개발자를 두렵게 합니다. 대부분의 플랫폼에서 Excel 파일을 사용하는 데는 많은 작업이 필요합니다.

예로부터 이는 웹에서 사실로 여겨져 왔습니다. 웹 앱에서 Excel 데이터를 사용하는 것은 이 링크의 만화와 같이 느껴졌습니다. 일반 사용자에게 "쉬운 것과 실제적으로 불가능한 것의 차이를 설명하는 것은 어려울 수 있습니다.

"Excel 가져오기 및 Excel 내보내기로 자체 브라우저 내 스프레드시트를 빌드하는 것은 5년 이상이 걸릴 수 있으며, 개발자들에게는 이는 쉽게 해결할 수 없는 문제처럼 느껴질 것입니다."

이제 GrapeCity의 SpreadJS(스프레드JS)를 사용하시면 이러한 고민은 해결할 수 있습니다. SpreadJS는 웹 앱에 완전한 기능의 스프레드시트를 드롭할 수 있는 턴키 라이브러리가 입니다.

해당 포스팅에서는 Vuex 스토어를 사용하는 실제 앱인 기존의 Vue 앱을 통해 SpreadJS를 사용하여 이를 개선하는 방법을 확인할 것입니다.

해당 포스팅에서는 HTML, CSS 및 JavaScript를 이미 이해하고 계신다고 가정합니다. 또한 웹 UI를 만들기 위한 Vue.js 점진적 JavaScript 프레임워크에 대한 사전 지식이 있다고 가정합니다. 상태 관리를 위해 Vuex를 사용하는 경우 도움이 되지만 그렇지 않더라도 걱정하지 마십시오.

직관적이며 이해하기가 쉬우며 Vue를 사용하는 경우 코드를 읽는 것 만으로 내용을 파악할 수 있습니다.

JavaScipt 프레임워크에서 Excel 내보내기를 테스트해보시겠습니까?

지금 다운로드하십시오!

이 블로그에서는 다음 단계에 따라 Vue 앱에 Excel 가져오기 및 내보내기를 추가하는 방법에 대해 다룹니다.

1. Vue 응용 프로그램 구조

2. Vue 앱에 SpreadJS 추가

3. Excel 내보내기 추가

4. Excel 가져오기 추가

5. Vue 앱 테스트

Vue 앱

저희가 사용할 Vue 앱은 몇 개의 요약 패널과 데이터 표가 있는 간단한 판매 대시보드입니다. "양호함" 범주에 해당하는 종류의 앱입니다.

데모임에도 불구하고 엔터프라이즈 웹 개발자가 만들어야 하는 바로 그 종류의 앱입니다. Excel 기능을 추가하도록 일반적으로 요구받는 바로 그 종류의 앱이기도 하므로 나머지 문서의 완벽한 예가 됩니다.

이 응용 프로그램의 코드는 여기 또는 첨부파일에서 찾아볼 수 있습니다.

단계 설정: 대시보드는 Vue로 만든 단일 페이지 응용 프로그램입니다. 최신 Vue 모범 사례인 단일 파일 컴포넌트 및 Vuew 데이터스토어(DataStore)를 사용합니다. CSS 컴포넌트 및 그리드 시스템에 Bootstrap도 사용합니다.

Bootstrap은 예전만큼 많이 사용되지는 않습니다. 하지만 실제로 Bootstrap은 아직 어디에나 있습니다. 특히 Excel 지원이 일반적으로 사용되는 엔터프라이즈 웹에서는 말입니다. 새로운 엔터프라이즈 웹 앱 대부분은 2030년에 계속해서 Bootstrap을 사용할 것이 틀림없습니다.

*스프레드시트가 활성화된 앱에서 Bulma 또는 Tachyons를 사용하려면 그렇게 하십시오! SpreadJS는 어떤 것이든 잘 작동할 것입니다.

Vue 응용 프로그램 구조

코드의 구조화 방식을 한 번 살펴보겠습니다. Vuex 스토어 및 Vue 응용 프로그램은 main.js에서 모두 정의됩니다. 여러 개의 단일 파일 Vue 컴포넌트가 있으며 모두 컴포넌트 폴더에 있습니다. Vuex 스토어(Store)를 보시면 다음 사항을 확인할 수 있습니다.

const store = new Vuex.Store({
 state: {
   recentSales
}
 mutations: {
   UPDATE_RECENT_SALES(state) {
     state.recentSales.push([]);
     state.recentSales.pop();
  }
}
});

스토어의 초기 상태는 가져온 더미 데이터 집합인 recentSales의 값으로 설정됩니다. 또한 변경되는 경우 최근 판매 업데이트를 처리하는 기능도 있습니다.

잠시만요. 하나의 데이터 집합만 있다면 세 개의 차트 및 표는 어떻게 생성할까요? 상황을 확인하려면 Dashboard.vue 컴포넌트를 열어보십시오.

여기에서는 Vuex 스토어에서 데이터를 기반으로 여러 개의 계산된 속성이 생성 중인 것을 확인할 수 있습니다.

<template>
<div style="background-color: #ddd">
    <NavBar title="Awesome Dashboard"/>
    <div class="container">
      <div class="row">
        <TotalSales :total="totalSales"/>
        <SalesByCountry :salesData="countrySales"/>
        <SalesByPerson :salesData="personSales"/>
        <SalesTable :tableData="salesTableData"/>
      </div>
    </div>
</div>
</template>
​
<script>
import NavBar from "./NavBar";
import TotalSales from "./TotalSales";
import SalesByCountry from "./SalesByCountry";
import SalesByPerson from "./SalesByPerson";
import SalesTable from "./SalesTable";
import { groupBySum } from "../util/util";
​
​
export default {
components: { NavBar, SalesByCountry, SalesByPerson, SalesTable, TotalSales },
computed: {
  totalSales() {
    const items = this.$store.state.recentSales;
    const total = items.reduce((acc, sale) => (acc += sale.value), 0);
    return parseInt(total);
  },
  chartData() {
    const items = this.$store.state.recentSales;
    const groups = groupBySum(items, "country", "value");
    return groups;
  },
  personSales() {
    const items = this.$store.state.recentSales;
    const groups = groupBySum(items, "soldBy", "value");
    return groups;
  },
  salesTableData() {
    return this.$store.state.recentSales;
  },
}
};
</script>

이제 더 나아졌습니다! 단일 데이터 집합에는 대시보드에 모든 수치와 표를 생성하는 데 필요한 모든 것이 포함되어 있습니다. 데이터는 반응형 Vuex 스토어에 있으므로 데이터가 업데이트되면 모든 대시보드 패널이 자동으로 업데이트됩니다.

이 반응성은 편집 가능한 스프레드시트로 지루하고 오래된 정적 표를 바꾸는 경우 다음 섹션에서 유용해집니다.

Vue 앱에 SpreadJS 추가

다음은 재미있는 부분이 시작되는 곳입니다! 우리에게 대시보드는 있지만 투박하고 오래된 HTML 표를 제거하고 싶습니다.

따라서 약간 변경해야 합니다. 뛰어난 시작점이 있지만 로컬에서 앱을 실행하여 라이선스 없이 개발 모드에서 SpreadJS를 사용해야 합니다.

여기 또는 첨부파일에서 완료된 코드를 다운로드하여 최종 결과를 볼 수 있습니다.

SpreadJS 없이 원본 프로젝트를 여는 것으로 시작하여 터미널을 열고 리포지토리를 복제한 디렉터리로 이동하고 'npm install'을 실행합니다. 이렇게 하면 응용 프로그램을 실행하는 데 필요한 종속성이 설치됩니다. 종속성 설치가 완료되면 'npm serve'를 실행하여 작동 중인 업데이트된 앱을 확인합니다.

특히 사용된 라이브러리를 가져오려는 경우 이 명령을 사용할 수 있습니다.

npm install @grapecity/spread-sheets @grapecity/spread-sheets-vue @grapecity/spread-excelio file-saver bootstrap

오래된 앱을 새롭게 개선된 버전으로 업그레이드해야 하는 변경 사항을 살펴보겠습니다. 판매 표를 스프레드시트로 바꿀 것이므로 시트를 기존의 SalesTable.vue 컴포넌트에 배치합니다. 하지만 먼저 오래된 표를 제거해야 합니다.

제거되고 나면 SalesTable 템플릿은 다음과 같은 모양이 됩니다.

<template>
<TablePanel title="Recent Sales">
</TablePanel>
</template>

표를 제거한 후에는 표 패널이 준비되며 스프레드시트를 기다립니다.

하나를 추가해보겠습니다! SpreadJS 시트를 추가하고 나면 템플릿은 다음과 같은 모양이 됩니다.

<template>
<TablePanel title="Recent Sales">
  <gc-spread-sheets :hostClass='hostClass' @workbookInitialized='workbookInit'>
    <gc-worksheet :dataSource='tableData' :autoGenerateColumns='autoGenerateColumns'>
      <gc-column
          :width='50'
          :dataField="'id'"
          :headerText="'ID'"
          :visible = 'visible'
          :resizable = 'resizable'
      >
      </gc-column>
      <gc-column
          :width='300'
          :dataField="'client'"
          :headerText="'Client'"
          :visible = 'visible'
          :resizable = 'resizable'
      >
      </gc-column>
      <gc-column
          :width="350"
          :headerText="'Description'"
          :dataField="'description'"
          :visible = 'visible'
          :resizable = 'resizable'
      >
      </gc-column>
      <gc-column
          :width="100"
          :dataField="'value'"
          :headerText="'Value'"
          :visible = 'visible'
          :formatter = 'priceFormatter'
          :resizable = 'resizable'
        >
        </gc-column>
        <gc-column
          :width="100"
          :dataField="'itemCount'"
          :headerText="'Quantity'"
          :visible = 'visible'
          :resizable = 'resizable'
        >
        </gc-column>
        <gc-column
          :width="100"
          :dataField="'soldBy'"
          :headerText="'Sold By'"
          :visible = 'visible'
          :resizable = 'resizable'
        ></gc-column>
        <gc-column
          :width="100"
          :dataField="'country'"
          :headerText="'Country'"
          :visible = 'visible'
          :resizable = 'resizable'
        ></gc-column>      
    </gc-worksheet>
  </gc-spread-sheets>
</TablePanel>
</template>

알아야 할 부분이 많으므로 내용을 이해하기 위해 살펴보겠습니다.

먼저 gc-spread-sheets 요소를 사용하고 컴포넌트의 속성 중 두 개(hostClass 및 workbookInit)에 바인딩하여 스프레드시트를 만듭니다.

스프레드시트 내부에는 gc-worksheet 요소로 새 워크시트를 만들어 컴포넌트의 tableData 및 autoGenerateColumns 속성에 바인딩합니다. tableData는 플레인 HTML 표를 생성하는 데 사용한 것과 정확하게 동일한 tableData입니다. 변경할 필요 없이 있는 그대로 데이터를 SpreadJS에 배치할 수 있습니다!

마지막으로 워크시트 내부에는 데이터를 표시하는 방법을 SpreadJS에 알리는 열을 정의합니다. dataField 속성은 이 열이 표시해야 할 기본 데이터 집합의 속성을 알려주며 headerText는 사용을 위해 형식이 잘 지정된 열 이름을 SpreadJS에 제공합니다. 각 열에 대한 나머지 바인딩은 쉽습니다. SpreadJS 문서에는 gc-column에 전달할 수 있는 모든 항목의 전체 목록이 있습니다.

따라서 템플릿을 제자리에 배치하고 이 모든 작업을 만드는 데 필요한 코드는 얼마나 될까요? 다행히 많지는 않습니다!

다음은 SalesTable.vue 컴포넌트의 새 스크립트 코드입니다.

import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
​
// SpreadJS imports
import GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-vue";
import Excel from "@grapecity/spread-excelio";
​
import TablePanel from "./TablePanel";
export default {
 components: { TablePanel },
 props: ["tableData"],
 data(){
     return {
       sheetName: 'Sales Data',
       hostClass:'spreadsheet',
       autoGenerateColumns:true,
       width:200,
       visible:true,
       resizable:true,
       priceFormatter:"$ #.00"
    }
  },
 methods: {
     workbookInit: function(_spread_) {
       this._spread = spread;
       var self = this;
       spread.bind(GC.Spread.Sheets.Events.ValueChanged, function () {
         const store = self.$store;
         var sheet = self._spread.getSheetFromName("Sales Data");
         var newSalesData = sheet.getDataSource();
         store.commit('UPDATE_RECENT_SALES', newSalesData);
      });
    }
  }
};

Vue의 단순성 덕분에 이 작업을 만드는 데 매우 적은 코드만 필요합니다.

익숙하지 않은 부분이 있다면 Vue 문서의 '심층 컴포넌트' 섹션에서 Vue 컴포넌트를 상세하게 설명합니다. 변경된 유일한 항목은 몇 개의 가져오기, 일부 데이터 속성 및 2-3개의 메서드입니다. 데이터 속성은 익숙해 보여야 합니다. 템플릿에서 방금 전에 확인했습니다. SpreadJS 스프레드시트에서 컴포넌트에 바인딩하는 구성 옵션입니다.

workbookInit 메서드는 시트가 초기화되는 경우 SpreadJS에서 호출하는 콜백입니다. 이 메서드에서는 SheetJS 스프레드시트 개체를 컴포넌트의 인스턴스 변수로 저장하므로 필요한 경우 직접 상호 작용할 수 있습니다. SpreadJS 인스턴스에서 값이 변경될 때마다 데이터를 자동으로 업데이트하도록 ValueChanged 이벤트의 바인딩 기능도 추가했습니다.

마지막 변경 사항: 스프레드시트 스타일 자체를 지원하도록 범위가 지정된 스타일을 구성 요소에 제공합니다. hostClass를 gc-spread-sheets 요소에 전달했을 때 이를 확인했습니다. hostClass가 'spreadsheet'로 설정되었으므로 spreadsheet라는 이름의 CSS 클래스를 만들겠습니다.

<style scoped>
.spreadsheet {
 width: 100%;
 height: 400px;
 border: 1px solid lightgray;
}
</style>

이 시점에 다른 사항을 변경하지 않고 대시보드를 로드하는 경우 다음과 같아집니다.

잠시만요, 그뿐만이 아닙니다!

데이터 집합을 변경하지 않고 스프레드시트에 표 데이터를 전달한 방법을 기억하시나요? 이제 데이터가 스프레드시트 안에 있으므로 편집할 수 있습니다.

#6 판매 값을 $35,000에서 $3500으로 변경하면 어떻게 될까요?

시트에 들어가 값을 편집하면 다음과 같은 대시보드를 얻게 됩니다.

우와! 무슨 일이 일어난 거죠?

SpreadJS 시트를 업데이트했더니 Vuex 스토어가 자동으로 업데이트되었습니다.

이제 관리자가 만족해할 개선된 대시보드가 되었습니다. 데이터를 수정하고 눈앞에서 대시보드 업데이트를 확인할 수 있습니다.

하지만 Excel 파일을 가져오고 내보내는 기능을 추가하면 더 수월하게 작업할 수 있습니다.

다음으로 이를 수행하는 방법에 대해 알아보겠습니다.

Excel 내보내기 추가

Excel 내보내기를 시트에 추가하는 방법은 쉽습니다. 먼저 내보내기 버튼을 대시보드에 추가해보겠습니다.

gc-spread-sheets 닫기 태그 바로 뒤에 SalesTable.vue 파일의 표 패널 하단에 배치하겠습니다.

…
  </gc-spread-sheets>
  <div class="dashboardRow">
    <button class="btn btn-primary dashboardButton" @click="exportSheet">
      Export to Excel
    </button>
  </div>
</TablePanel>
</template>

보시다시피 버튼은 exportSheet라는 클릭 처리기를 원하고 있습니다. 곧 추가해보겠습니다.

하지만 먼저 file-saver라는 NPM 패키지에서 기능을 가져오겠습니다.

import { saveAs } from 'file-saver';

다음으로 컴포넌트의 메서드 개체에 exportSheet를 추가해보겠습니다.

exportSheet: function() {
 const spread = this._spread;
 const fileName = "SalesData.xlsx";
 //const sheet = spread.getSheet(0);
 const excelIO = new IO();
 const json = JSON.stringify(spread.toJSON({
     includeBindingSource: true,
     columnHeadersAsFrozenRows: true,
}));
​
 excelIO.save(json, (blob) => {
   saveAs(blob, fileName);
}, function (e) {  
   console.log(e)  
});
}

다음은 코드가 수행하는 작업입니다. 먼저 판매 데이터 시트에 대한 참조를 가져옵니다. 스프레드시트에 있는 유일한 시트이므로 인덱스 0에 있으며 getSheet를 호출하여 액세스합니다. 이는 기능 어디에서든 사용할 수 있으며 시트와 직접 상호 작용할 수 있어야 합니다.

그런 다음 SpreadJS의 ExcelIO 라이브러리를 인스턴트화하고 시트를 JSON으로 변환한 다음 SpreadJS에서 저장하도록 요청합니다. 어떤가요! 스프레드시트가 활성화된 Vue 앱에서 Excel 파일을 내보냈습니다!

두 개의 직렬화 옵션인 includeBindingSource 및 columnHeadersAsFrozenRows를 시트의 toJSON 호출에 전달하고 있습니다. 함께 이러한 옵션은 시트에 바인딩한 데이터를 올바르게 내보냈으며 시트에 열 헤더가 포함되어 있음을 확인합니다. 따라서 내보낸 Excel 파일을 보면 각 열을 이해할 수 있습니다.

Excel 가져오기 추가

다음으로 Excel 파일을 가져오는 기능을 추가할 시간입니다.

바로 아래에는 내보내기 버튼이 있으며 다음 마크업을 조금 추가해보겠습니다.

<div>
<b>Import Excel File:</b>
<div>
  <input type="file" class="fileSelect" @change='fileChange($event)' />
</div>
</div>

보시다시피 표준 HTML 파일 선택기를 사용하고 파일이 선택되면 fileChange라는 컴포넌트 메서드를 트리거하겠습니다.

이제 템플릿을 추가했으며 변경 처리기를 컴포넌트의 메서드 개체에 추가해보겠습니다.

fileChange: function (_e_) {
 if (this._spread) {
   const fileDom = e.target || e.srcElement;
   const excelIO = new Excel.IO();
   const spread = this._spread;
   const store = this.$store;
   
   /*const deserializationOptions = {
    includeBindingSource: true,
    frozenRowsAsColumnHeaders: true
  };*/
​
   excelIO.open(fileDom.files[0], (_data_) => {
     // Used for simply loading the JSON from a file
     //spread.fromJSON(data, deserializationOptions);
     var newSalesData = extractSheetData(data);
     store.commit('IMPORT_RECENT_SALES', newSalesData)
  });
}
}

Excel 파일 가져오기는 내보내기와 거의 마찬가지입니다. 파일이 선택되고 나면 ExcelIO에서 가져오도록 요청합니다.

완료된 경우 시트 정보를 JavaScript 개체로 콜백 기능에 전달합니다. 다음으로 사용자 정의 함수를 통해 가져온 데이터를 전달하여 필요한 데이터를 추출하고 Vuex 스토어에 다시 커밋합니다. 일반적으로 파일 가져오기는 ExcelIO open 메서드를 호출하지만 통합 문서 "fromJSON" 메서드를 사용하는 것만큼 간단합니다.

이 경우 가져온 파일에서 데이터를 구문 분석하고 SpreadJS를 업데이트할 스토어를 업데이트하고 싶습니다.

extractSheetData 함수에서는 src/util.util.js 파일을 찾아볼 수 있으며 ExcelIO에서 반환한 JavaScript 개체에서 데이터를 가져오고 Vuex 스토어에서 데이터의 모양과 일치하도록 다시 구조화하겠습니다.

*참고

가져오기 함수는 가져온 시트의 데이터에 원본 데이터 집합과 동일한 열이 있다고 가정합니다. 이 요구 사항과 일치하지 않는 스프레드시트를 누군가가 업로드한 경우 앱은 이를 처리할 수 없습니다. 이는 대부분의 영업부문 앱에서 허용되는 제한 사항입니다. 대시보드는 특정 데이터 유형을 표시하도록 설계되었으므로 사용자에게 앱에서 예상하는 형식으로 데이터를 공급하도록 요청하는 것은 합리적입니다.

데이터 추출이 완료되면 Vuex 스토어에서 커밋을 호출하고 업데이트된 판매 거래 데이터를 전송합니다. 그러면 SpreadJS 시트 및 대시보드 패널이 스스로 업데이트하여 새 데이터를 반영합니다.

main.js 파일을 "IMPORT_RECENT_SALES"로 추가할 수 있도록 가져오기와 변경되는 값에 다른 중립 함수를 실제로 사용할 수 있습니다.

const store = new Vuex.Store({
   state: {
       recentSales
  },
   mutations: {
       UPDATE_RECENT_SALES(state) {
         state.recentSales.push([]);
         state.recentSales.pop();
      },
       IMPORT_RECENT_SALES(state, sales) {
         state.recentSales = sales;
      }
  }
});

Vue 앱 테스트

이제 코드를 확인했으니 Vue 앱에서 Excel 가져오기와 내보내기를 테스트해보겠습니다.

'Excel로 내보내기' 버튼을 클릭하여 시작합니다. 그러면 웹 브라우저가 데이터보드의 스프레드시트에서 본 모든 데이터를 포함한 Excel 스프레드시트를 다운로드합니다. Excel에서 시트를 열고 몇 줄의 데이터를 추가합니다. 새로운 국가나 새로운 판매사원을 이용하는 경우에는 괜찮습니다. 모든 대시보드 컴포넌트는 이를 처리할 수 있습니다.

열 순서 또는 이름을 변경하지 않도록 주의해주십시오.

완료되면 최근 판매 패널 하단에서 '파일 선택' 버튼을 클릭합니다. 방금 편집한 Excel 파일을 선택합니다.

파일을 선택하는 경우 업데이트한 대시보드 컴포넌트를 확인할 수 있습니다.

결론

완료했습니다! 일반 Vue 대시보드 앱을 사용하여 라이브 스프레드시트를 추가했습니다.

이제 시트에서 데이터를 편집하고 전체 대시보드 업데이트 자체를 살펴볼 수 있습니다. 개선된 대시보드에서도 Excel 파일을 가져오고 내보낼 수 있습니다.

Vue, Vuex 및 SpreadJS는 서로 잘 호환됩니다. Vue의 쉬운 템플릿 지정 및 데이터 바인딩, Vuex의 반응형 데이터스토어 및 SpreadJS의 대화형 스프레드시트가 있는 복잡한 엔터프라이즈 JavaScript 앱을 몇 시간 내에 만들 수 있습니다.

보이는 것만큼 굉장한 SpreadJS에서 할 수 있는 사항의 표면만 살짝 보았을 뿐입니다. SpreadJS에서 할 수 있는 사항을 더 잘 이해하려면 SpreadJS 튜토리얼를 참조하십시오. 여기에는 이러한 기능을 표시하는 라이브 코드 및 설명과 더불어 SpreadJS의 다양한 기능의 전체 데모가 포함되어 있습니다.

자체 앱에서 SpreadJS 사용에 대한 더 자세한 방법을 알아보려는 경우 SpreadJS 문서에 필요한 정보가 있습니다.

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

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