프론트엔드 기반으로 Excel을 읽어올 때는 로컬에 있는 파일만 읽어올 수 있어 제약사항이 많습니다.

이에 이번 포스팅에서는 로컬 PC가 아닌 파일 서버와 같이 URL를 통해 접근할 수 있는 다른 위치에 있는 Excel(엑셀) 파일을 읽어오는 방법에 대해서 설명합니다.

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

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

---

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> 

<!-- 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.10 버전을 사용합니다.

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

<script src="https://cdn.mescius.com/spreadjs/hosted/scripts/gc.spread.sheets.all.17.0.10.min.js" type="text/javascript"></script> 
<script src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.shapes.17.0.10.min.js" type="text/javascript"></script> 
<script src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.charts.17.0.10.min.js" type="text/javascript"></script> 
<script src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.slicers.17.0.10.min.js" type="text/javascript"></script>
<script src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.pivot.pivottables.17.0.10.min.js" type="text/javascript"></script>
<script src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.io.17.0.10.min.js" type="text/javascript"></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.10.css"> 

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

2. HTML 화면 구성

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

<!-- 불러올 Excel 파일의 URL을 입력하는 TextBox -->
<input id="importURL"value="https://assets.codepen.io/975719/export.xlsx"/>

<!-- URL로 Excel 파일을 읽어오는 버튼 -->
<button onclick="importExcelfromURL()">URL을 통해 엑셀 불러오기</button>

<!-- Excel 시트를 생tjd하는 div -->
<div id="ss" style="width:100%;height:380px"></div>

3. SpreadJS 초기화 - 엑셀 시트 만들기

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

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

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

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

4. URL을 통해 SpreadJS로 Excel 파일 가져오기

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

function importExcelfromURL() {
  var url = document.getElementById("importURL").value;
  fetch(url)
    .then(res => res.blob()) // returns URL data a blob
    .then((blob) => {
    console.log(blob);
    spread.suspendPaint();
    spread.import(blob, function () {
      // success callback to do something
    }, function (e) {
      console.log(e); // error callback
    }, {
      // importoptions - https://developer.mescius.com/spreadjs/api/modules/GC.Spread.Sheets#importoptions
      // fileType: GC.Spread.Sheets.FileType.excel
    });
    spread.resumePaint();
  });
}

SpreadJS를 통해, 로컬 PC가 아닌 외부 서버에 있는 Excel 파일을 URL을 통해서 읽어오는 Excel 뷰어를 만들어 보았습니다!

---

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

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

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