"좋아 보이는데.. Excel 가져오기를 추가할 수 있나요?"

오랫동안 소프트웨어를 개발했다면 관리자로부터 해당 질문을 두 번 이상 들어봤을 것입니다. 기술자가 아닌 사람들은 Excel 가져오기/내보내기를 요청하는 것을 쉽게 생각할 수 있습니다.

그러나 이 질문은 개발자들의 마음에 두려움을 안겨줍니다. 대부분의 플랫폼에서 Excel 파일 로 작업하려면 많은 작업이 필요합니다. Excel 가져오기 및 내보내기를 사용하여 자체 브라우저 내 스프레드시트를 구현하는 데 5년이 걸리고 연구팀이 해결해야 할 문제인 것 처럼 느껴집니다.

하지만, 이제 변화하고 있습니다. 완전한 기능을 갖춘 스프레드시트를 웹 앱에 놓을 수 있는 라이브러리가 있으며, 바로 사용할 수 있습니다. SpreadJS가 그 중 하나입니다. 이 포스팅에서는 기존 Vue앱(Vuex 스토어를 사용하는 실제 앱)을 가져오고 SpreadJS를 사용하여 성능을향상시키는 방법을 살펴 보겠습니다.

이 포스팅의 나머지 부분에서는 HTML, CSS 및 JavaScript를 이미 이해하고 있다고 가정하겠습니다.  또한, 웹 UI를 만들기 위한 Vue.js 점진적 JavaScript 프레임워크에 대한 실무 지식이 있다고 가정하겠습니다. 상태 관리를 위해 Vuex를 사용해본 경우 더욱 더 도움이 되지만 사용해보지 않았더라도 크게 걱정하실 필요는 없습니다. Vue를 사용해보았다면 직관적이고 이해하기 쉬울 것이며, 코드를 통해 진행 상황을 파악할 수 있을 것입니다.

Vue 애플리케이션

우리가 작업할 Vue 앱은 몇 개의 요약 패널과 데이터 테이블이 있는 간단한 영업 대시 보드입니다. "나쁘지 않은"범주에 속하는 앱의 종류입니다.

데모일 뿐이지만 엔터프라이즈 웹 개발자가 만들어야하는 앱 중 하나입니다. 또한 우리가 일반적으로 Excel 기능을 추가하도록 요청받은 것과 같은 종류의 앱이므로 이 포스팅의 나머지 부분에 대한 완벽한 예시가 되어 줄 것입니다.

CodeSandbox에서 앱이 실시간으로 실행되는 것을 볼 수 있습니다. 

스테이지를 설정하려면: 대시보드는 Vue를 사용하여 만든 단일 페이지 애플리케이션입니다. 단일 파일 구성 요소 및 Vuex 데이터 저장소와 같은 최신의, 그리고 최고의 Vue 모범 사례를 사용하고 있습니다. 또한 CSS 컴포넌트와 그리드 시스템에도 Bootstrap을 사용하고 있습니다. 

Bootstrap은 예전만큼 인기가 있지는 않지만, 실제로 Bootstrap은 여전히 ​​어디에서나 쓰이고 있습니다. Excel 지원이 필요한 엔터프라이즈 웹 애플리케이션의 경우, 특히 Bootstrap을 많이 사용하고 있습니다. 2030년에도 수많은 새로운 엔터프라이즈 웹 앱이 Bootstrap을 사용하게 될 것입니다.

여러분의 스프레드시트 지원 앱에서 Bulma 또는 Tachyons 를 사용하고자 한다면, 바로 진행해도 괜찮습니다. SpreadJS는 둘 중 하나와 함께 잘 작동합니다.

Vue 애플리케이션 구조

코드가 어떻게 구성되어 있는지 살펴 보겠습니다. Vuex 저장소와 Vue 애플리케이션은 둘 다index.js에 정의되어 있습니다 .  components폴더에 여러 개의 단일 파일 Vue 컴포넌트가 있습니다 . Vuex 저장소를 보면 다음과 같은 내용이 표시됩니다.

const store = new Vuex.Store({  
  state: {  
    recentSales  
  }  
});

저장소의 초기 상태는 방금 가져온 더미 데이터 세트 인 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 total = this.$store.state.recentSales.reduce(  
          (acc, sale) => (acc += sale.value), 0);  
        return parseInt(total);  
      },  
      countrySales() {  
        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 테이블을 제거하고 싶기 때문에 약간의 변경이 필요합니다. CodeSandbox는 처음 시작하기에는 좋았지만, 라이선스 없이 개발 모드에서 SpreadJS를 사용하려면 앱을 로컬로 실행해야 합니다.

GitHub 레포지토리(https://github.com/rpeden/vue-spreadjs)에서 코드 복사본을 복제할 수 있습니다. 이 작업을 마치면 터미널을 열고 레포지토리를 복제한 디렉토리로 이동하여 'npm install'을 실행하십시오. 애플리케이션을 실행하는 데 필요한 종속성이 설치됩니다. 종속성 설치가 완료되면 'npm serve'를 실행하여 업데이트 된 앱이 실제로 작동하는지 확인하십시오.

이전 앱을 새롭고 개선된 버전으로 업그레이드하기 위해 변경해야 할 사항을 살펴 보겠습니다. sales 테이블을 스프레드시트로 교체할 것이므로 시트를 기존 SalesTable 컴포넌트에 넣습니다. 넣기 전에 먼저 이전 테이블을 제거해야 합니다. 이 과정을 거치고 나면, 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 propertie 에 바인딩하여 새로운 워크시트를 생성합니다. 참고로, tableData는 우리가 일반 HTML 테이블을 생성하는 데 사용한 tableData 와 동일합니다. 이를 통해, 데이터를 변경하지 않고도 SpreadJS에 그대로 넣을 수 있다는 것을 알 수 있습니다.

마지막으로, 워크 시트 내에서 SpreadJS에 데이터 표시 방법을 알려주는 열을 정의합니다. dataField 속성은 이 열이 표시해야 하는 기본 데이터 집합의 속성을 알려주고 headerText는 SpreadJS에 형식화된 열 이름을 제공합니다. 각 열의 나머지 바인딩은 간단합니다. SpreadJS 문서에는 gc-column에 전달할 수 있는 모든 리스트가 있습니다.

템플릿이 완성된 후, 모든 것이 제대로 작동하기 위해 얼마나 많은 코드가 필요할까요? 다행히도 그리 많지는 않습니다. SalesTable 컴포넌트의 새로운 스크립트 코드는 다음과 같습니다.

import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";

_// SpreadJS imports_  
import "@grapecity/spread-sheets-vue";  
import Excel from "@grapecity/spread-excelio";

import TablePanel from "./TablePanel";  
export default {  
  components: { TablePanel },  
  props: ["tableData"],  
  data(){  
      return {  
        hostClass:'spreadsheet',  
        autoGenerateColumns:true,  
        width:200,  
        visible:true,  
        resizable:true,  
        priceFormatter:"$ #.00"  
      }  
    },  
  methods: {  
      workbookInit: function(_spread_) {  
        this._spread = spread;  
      }  
    }  
};

Vue의 단순성으로 인해 이 작업을 수행하는 데 코드가 거의 필요하지 않습니다. 여기에 익숙하지 않은 부분이 있으면 Vue 설명서의 '심층적인 컴포넌트' 섹션에서 Vue 컴포넌트에 대해 자세히 알아볼 수 있습니다. 이전과 변경된 유일한 것은 몇가지 가져오기, 일부 데이터 속성 및 몇가지 메서드입니다. 템플릿에서 데이터 속성을 보았기 때문에 데이터 속성은 익숙해야 합니다. 그 데이터 속성들은 SpreadJS 스프레드시트의 컴포넌트에 바인딩하는 구성 옵션입니다.

workbookInit 메서드는 시트가 초기화 될 때 SpreadJS가 호출하는 콜백입니다. 이 메서드에서는 SheetJS 스프레드시트 객체를 컴포넌트의 인스턴스 변수로 저장하여 필요한 경우 직접 상호 작용할 수 있습니다.

마지막 변경 사항 : 컴포넌트에 범위 스타일을 지정하여 스프레드시트 스타일 자체를 지원합니다. 이전에 hostClass를 gc-spread-sheets 요소에 전달했을 때 보았습니다. hostClass가 'spreadsheet'로 설정되었으므로 스프레드시트라는 CSS 클래스를 작성합니다.

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

여기에서 다른 것을 변경하지 않고 대시 보드를 로드하면 다음과 같이 표시됩니다.

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

6번째 행의 판매액을 35,000 달러에서 3500 달러로 변경하면 어떻게 될까요? 시트로 이동하여 값을 편집하면 다음과 같은 대시 보드가 나타납니다.

SpreadJS 시트를 업데이트하고 Vuex 스토어를 자동으로 업데이트 했습니다! 이를 위해 코드를 추가할 필요도 없었습니다. SpreadJS Vue wrapper는 기본적으로 반응형입니다.

스프레드시트 변경 사항을 Vuex 저장소에 다시 바인딩하기 위해 변경 핸들러를 수동으로 연결하려고 했지만 SpreadJS가 이를 처리해주었습니다.

이제 관리자가 만족할 만한 향상된 대시 보드를 볼 수 있습니다. 데이터를 수정하고 눈앞에서 대시 보드 업데이트를 볼 수 있습니다. 그러나 Excel 파일을 가져오고 내보내는 기능을 추가하여 더욱 좋을 것입니다. 이제, 그 방법을 알아보겠습니다.

Excel 내보내기 추가

시트에 Excel 내보내기를 추가하는 것은 쉽습니다. 먼저 대시 보드에 내보내기 버튼을 추가하겠습니다. gc-spread-sheets 닫는 태그 바로 다음에 테이블 패널의 맨 아래에 배치합니다.

…  
    </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 Excel.IO();  
  const json = JSON.stringify(spread.toJSON({  
      includeBindingSource: true,  
      columnHeadersAsFrozenRows: true,  
  }));  
  excelIO.save(json, function(_blob_){  
    saveAs(blob, fileName);  
  }, function (_e_) {   
    console.log(e)   
  });  
}

코드가 수행하는 작업은 다음과 같습니다. 먼저 영업 데이터 시트에 대한 참조를 얻습니다. 스프레드시트의 유일한 시트이므로 인덱스 0에 있으며 getSheet를 호출하여 액세스합니다. 그런 다음 SpreadJS의 ExcelIO 라이브러리를 인스턴스화 할 때 시트를 JSON으로 변환하고 SpreadJS에 저장하도록 요청합니다. 그러면, 스프레드시트 지원 Vue 앱에서 Excel 파일을 내보낼 수 있습니다.

시트의 toJSON 호출에 includeBindingSource 및 columnHeadersAsFrozenRows라는 두 가지 직렬화 옵션을 전달합니다. 이러한 옵션을 함께 사용하면 시트에 바인딩한 데이터가 올바르게 내보내지고 시트에 열 머리글이 포함되므로 내보낸 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;

      excelIO.open(fileDom.files[0], (_data_) => {  
      const newSalesData = extractSheetData(data);  
      store.commit('updateRecentSales', newSalesData)  
    });  
  }  
}

Excel 파일을 가져오는 것은 Excel 파일을 내보내는 것과 거의 동일합니다. 파일을 선택한 후 ExcelIO에서 가져 오도록 요청하고, 완료되면 시트 정보를 JavaScript 객체로 콜백 함수에 전달합니다. 다음으로 가져온 데이터를 사용자 정의 함수를 통해 전달하여 필요한 데이터를 추출한 다음 Vuex 저장소에 다시 커밋합니다.

src / util.util.js 파일에서 찾을 수 있는 extractSheetData 함수에서 ExcelIO에 의해 반환된 JavaScript 객체의 데이터를 추출하고, Vuex 저장소에 데이터 형태를 맞추기 위해 재구성합니다.

가져오기 기능은 가져온 시트의 데이터에 원래 데이터 세트와 동일한 열이 있다고 가정합니다. 누군가 이 요구 사항을 충족하지 않는 스프레드시트를 업로드하면 Google 앱에서 해당 스프레드시트를 처리 할 수 ​​없습니다. 이는 대부분의 업무용 앱에서 허용되는 제한 사항입니다. 대시보드는 특정 유형의 데이터를 표시하도록 설계되었으므로 사용자에게 앱이 기대하는 형식으로 데이터를 제공하도록 요청하는 것이 합리적입니다.

데이터 추출이 완료되면 Vuex 저장소에서 커밋을 호출하고 업데이트된 판매 거래 데이터를 보냅니다. SpreadJS 시트와 모든 대시 보드 패널은 새 데이터를 반영하도록 자체 업데이트됩니다.

Vue 앱 테스트

이제 코드를 보았으므로 Vue 앱에서 Excel 가져오기 및 내보내기를 테스트 해보겠습니다.

'Excel로 내보내기' 버튼을 클릭하면, 웹 브라우저가 대시보드의 스프레드시트에서 본 모든 데이터가 포함된 Excel 스프레드시트를 다운로드합니다. Excel에서 시트를 열고 몇 줄의 데이터를 추가하면, 모든 대시보드 컴포넌트가 이를 처리 할 수 ​​있습니다. 다만, 열 순서나 이름을 변경하지 않도록 주의해야 합니다. 완료되면 최근 영업 패널 하단의 '파일 선택' 버튼을 클릭하여, 방금 편집한 Excel 파일을 선택합니다.

파일을 선택하면 모든 대시보드 컴포넌트가 업데이트됩니다.

결론

이제 끝났습니다! 일반적인 Vue 대시보드 앱을 사용하여 실시간 스프레드시트를 추가했습니다. 이제 시트의 데이터를 편집하고 전체 대시보드 업데이트 자체를 볼 수 있습니다. 기능이 향상된 이 대시 보드는 Excel 파일을 가져오고 내보낼 수도 있습니다. Vue, Vuex 및 SpreadJS는 서로 잘 보완됩니다. Vue의 쉬운 템플릿 및 데이터 바인딩, Vuex의 반응형 데이터 저장소 및 SpreadJS의 대화형 스프레드 시트를 사용하면 복잡한 엔터프라이즈 JavaScript 앱을 몇시간 안에 만들 수 있습니다.

이러한 기능은 아주 좋아보이지만, SpreadJS에는 더욱 더 강력한 기능들이 포함되어 있습니다. 더 자세히 살펴보려면 SpreadJS 튜토리얼 사이트를 참고할 수 있습니다. 또한 여러분의 앱에서 SpreadJS를 사용하는 방법에 대해 자세히 알아보려면, SpreadJS 개발자 문서에서 필요한 정보들을 확인할 수 있습니다.

다음 포스팅

스프레드시트가 있는 대시보드는 훌륭하지만 조금 부족해 보입니다. 관리자가 대시보드에서 가장 좋아하는 것은 바로 차트입니다.

다행히 SpreadJS는 차트 지원 기능을 기본적으로 제공합니다. 다음 포스팅에서는 SpreadJS 차트를 사용하여 대시 보드를 향상시키는 방법을 알아보겠습니다. 또한, 다른 포스팅에서는 SpreadJS 슬라이서를 사용하여 JavaScript 차트를 슬라이스하는 방법에 대해 설명합니다 .

다른 포스팅 시리즈에서는 다른 Javascript 프레임 워크에서 Excel을 내보내는 방법을 설명합니다.

• React
• Angular
• JavaScript