JavaScript로 Excel(엑셀) 뷰어를 만드는 작업은 생각보다 까다롭습니다. 😟

" 이게 쉬우면 내가 Google Sheets나 Micrisoft Excel을 만들지 !!! 라고 생각하시겠죠? ^^ "

아주 단순하게 정형화된 Excel 파일에 있는 단순 데이터를 JSON 형태로 코드 단에 읽어오는 것은 가능하지만... 실제 비즈니스 솔루션 개발에서는, 읽어온 Excel(엑셀) 파일을 그대로 웹 페이지 상에 Excel(엑셀) 느낌으로 보여주고, 이를 사용자가 자유롭게 수정하게 해달라는 기능 요구 사항이 정말 많고, 중요한 비중을 차지합니다. ㅠㅠ

이번 스터디에서는 JavaScript 코드 만으로 웹 상에서 여러 수식과 양식(스타일, 테두리, 색상, 이미지 등)이 적용되어 있는 엑셀(Excel) 파일(xlsx)을 그대로 읽고, 이를 Excel 형태로 웹 화면에 보여주고 사용자가 쉽게 편집할 수 있는 방법을 설명합니다.

서버측 기술없이도 클라이언트 기술로만 로컬에 저장된 엑셀(Excel) 파일의 수식부터 차트, 셀 서식, 이미지 등을 그대로 읽고 수정 및 저장할 수 있는 라이브러리인 SpreadJS를 사용하여 엑셀 파일을 자유롭게 다루는 방법을 JS코드로 정리해 봅니다.

"와우! JS 코드로 Excel 수식, 차트, 이미지, 셀 서식, 테두리, 셀 색상 모두 다 가져올 수 있다고요??!!" 😲

아래는 JavaScirpt 코드로 개발한 Excel 가져오기/내보내기 실제 동작하는 샘플입니다.

1. 라이브러리 참조

엑셀 불러오기 기능을 구현하기 위해 SpreadJS 라이브러리를 참조합니다.
SpreadJS 라이브러리는 아래 링크에서 무료로 다운로드 할 수 있습니다.

>> SpreadJS | JavaScript Excel UI & API 무료 다운로드 <<

다운받고 압축을 푼 뒤에, 아래와 같이 HTML Header에 필요한 라이브러리들을 가져옵니다.

xx.x.x 는 버전을 의미 합니다. 다운 받으신 라이브러리 버전에 맞추어서 변경해주세요.

<!--SpreadJS 라이브러리 -->
<script src="./scripts/gc.spread.sheets.all.xx.x.x.min.js" type="text/javascript"></script> 
<script src="./scripts/gc.spread.sheets.shapes.xx.x.x.min.js" type="text/javascript"></script>
<script src="./scripts/gc.spread.sheets.charts.xx.x.x.min.js" type="text/javascript"></script> 
<script src="./scripts/gc.spread.sheets.slicers.xx.x.x.min.js" type="text/javascript"></script>
<script src="./scripts/gc.spread.sheets.pivottables.xx.x.x.min.js" type="text/javascript"></script>
<script src="./scripts/gc.spread.sheets.io.xx.x.x.min.js" type="text/javascript"></script> 

<!-- FileSaver 라이브러리 -->
<script src="./filesaver/FileSaver.min.js"></script> 

<!-- MS Excel 2016 테마 css -->
<link rel="stylesheet" type="text/css" href="./styles/gc.spread.sheets.excel2016colorful.xx.x.x.css""> 

<!--한국어 지원 리소스-->
<script src="./scripts/resources/ko/gc.spread.sheets.resources.ko.xx.x.x.min.js" type="text/javascript"></script>

(추가 방법) CDN을 통해서 라이브러리를 가져올 수도 있습니다.

실제 개발 시에는 CDN 사용를 권장하지 않습니다 !! 아래는 SpreadJS v17.0.7 버전을 사용합니다.

<!--SpreadJS 라이브러리 -->

<script src="https://cdn.mescius.com/spreadjs/hosted/scripts/gc.spread.sheets.all.17.0.7.min.js" type="text/javascript"></script> 
<script src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.shapes.17.0.7.min.js" type="text/javascript"></script> 
<script src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.charts.17.0.7.min.js" type="text/javascript"></script> 
<script src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.slicers.17.0.7.min.js" type="text/javascript"></script>
<script src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.pivot.pivottables.17.0.7.min.js" type="text/javascript"></script>
<script src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.io.17.0.7.min.js" type="text/javascript"></script>

<!-- FileSaver 라이브러리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script> 

<!-- MS Excel 2016 테마 css -->
<link rel="stylesheet" type="text/css" href="https://cdn.mescius.com/spreadjs/hosted/css/gc.spread.sheets.excel2016colorful.17.0.7.css"> 

<!--한국어 지원 리소스-->
<script src="https://cdn.mescius.com/spreadjs/hosted/scripts/resources/ko/gc.spread.sheets.resources.ko.17.0.7.min.js" type="text/javascript"></script>

2. HTML 요소 만들기

파일을 불러오고 내보내는 버튼들과 SpreadJS 컴포넌트를 띄울 div를 추가합니다.

<div>
  <input type="file" name="files[]" id="fileDemo" accept=".xlsx"/>
  
  <!--Excel 가져오기 버튼-->
  <input type="button" value="Import" onclick="ImportFile()"/>  
  <!--Excel 내보내기 버튼-->
  <input type="button" value="Export" onclick="Export_Excel()"/>
  <input type="text" id="exportFileName" placeholder="Export file name" value="export"/>
  <div id="ss" style="width:100%;height:380px"></div>
</div>

3. SpreadJS 초기화

SpreadJS를 초기화하기 위해 window.onload에 아래와 같이 작성합니다.

let spread;
window.onload = function () {
  spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
 
}

아래 이미지와 같은 화면이 구현되었습니다.

이제 실제 버튼 클릭 시 동작하는 기능들을 구현해보도록 하겠습니다.

4. SpreadJS로 Excel 파일 가져오기

Excel 파일을 SpreadJS 인스턴스로 가지고 오는 코드를 추가하겠습니다.

function ImportFile() {
  let file = document.getElementById("fileDemo").files[0];
  let fileType = file.name.split('.');
  if(fileType[fileType.length-1] == 'xlsx') {
    spread.import(file, function () {
      // success callback to do something
    }, function (e) {
      console.log(e); // error callback
    }, {
      fileType: GC.Spread.Sheets.FileType.excel
    });
  }
}

5. SpreadJS로 Excel 파일 내보내기

가져오기와 마찬가지로 내보낼 때, Excel 파일에 암호를 추가할 수 있도록 지원합니다.

function Export_Excel() {
  let fileName = document.getElementById("exportFileName").value;
  if (fileName.substr(-5, 5) !== '.xlsx') {
    fileName += '.xlsx';
  }
  spread.export(function (blob) {
    saveAs(blob, fileName);
  }, function (e) {
    console.log(e);
  }, { 
    fileType: GC.Spread.Sheets.FileType.excel
  });
}

6. SpreadJS 특정 셀 데이터 가져오기

SpreadJS에서는 Excel 시트에 있는 데이터들을 JavaScirpt 코드로 가져올 수 있는 함수를 제공합니다.

특정 셀의 데이터 읽기

아래와 같은 코드로 특정 셀에 있는 데이터 값을 가져올 수 있습니다.

// 현재 시트 가져오기
let sheet = spread.getActiveSheet();

// A1 데이터 가져오기
let val = sheet.getValue(0,0);
console.log("A1-", val);

특정 셀 영역의 데이터 읽기

getArray 함수를 이용하여 특정 셀 영역에 있는 데이터 값을 배열(Array)형태로 가져올 수 있습니다.

// 현재 시트 가져오기
let sheet = spread.getActiveSheet();

// B2:D4 데이터 가져오기
 let arr = sheet.getArray(0,0,10,10);
 console.log(arr);

아래는 HTML 버튼을 눌렀을때, SpreadJS 위에 있는 Excel 시트 상의 데이터를 읽어 Console로 보여주는 샘플 코드 입니다.

function getCellData() {
  // 현재 시트 가져오기
  let sheet = spread.getActiveSheet();
  // A1 데이터 가져오기
  let val = sheet.getValue(0,0);
  console.log("A1-", val);
  // B2:D4 데이터 가져오기
  let arr = sheet.getArray(1,1,3,3);
  console.log("B2:D4-", arr);
}

SpreadJS를 사용해 여러분들만의 Excel 뷰어를 만들어 보았습니다!

위의 코드를 실행하면, 웹 페이지 상에 Excel의 화면과 Excel 파일 읽기/쓰기 기능을 개발할 수 있습니다.
이 뷰어를 사용하면 몇 가지 간단한 단계만으로 Excel 파일을 열고, 보호하고, 암호를 추가한 다음 내보낼 수도 있습니다.

---

지금 SpreadJS를 무료로 사용해보세요!!

더욱 상세한 기능이 포함되어 있는 Excel 가져오기/내보내기 데모를 소스 코드와 함께 확인해 볼 수 있어요!!! PureJS, React, Vue, Angular 코드도 확인할 수 있어요 !!

• SpreadJS 홈페이지
• SpreadJS Excel 가져오기/내보내기
• SpreadJS Excel 암호 지원