JavaScript로 Excel 파일 읽기

서버측의 기술없이 클라이언트 기술만으로 로컬에 저장된 엑셀 파일을 다룰 수 있는 라이브러리인 sheetjs에 대한 다양한 기능 중 엑셀 파일을 읽는 기능에 대한 JavaScript 코드를 정리해 봅니다.

이 라이브러리를 별도로 다운로드 받지 않고도 CDN을 통해 이용할 수 있습니다. 아래는 제가 이용한 CDN 접근입니다.


읽고자 하는 엑셀 파일은 다음과 같습니다.

위의 엑셀 파일을 선택하고, 선택된 엑셀 파일을 JSON 형식으로 변환해 콘솔에 출력하는 DOM 요소는 다음과 같습니다.


위의 input DOM 요소를 통해 파일을 선택할 때 발생하는 이벤트 코드는 다음과 같습니다.

function readExcel() {
    let input = event.target;
    let reader = new FileReader();

    reader.onload = function () {
        let data = reader.result;
        let workBook = XLSX.read(data, { type: 'binary' });

        workBook.SheetNames.forEach(function (sheetName) {
            console.log('SheetName: ' + sheetName);

            let rows = XLSX.utils.sheet_to_json(workBook.Sheets[sheetName]);
            console.log(JSON.stringify(rows));
        })
    };

    reader.readAsBinaryString(input.files[0]);
}

실행하고, 엑셀 파일을 선택해 보면 다음과 같은 내용이 콘솔에 표시되는 것을 확인할 수 있습니다.

SheetName: #인구수
[
   {
      "지역명":"무안군 무안읍",
      "남자":8599,
      "여자":7900,
      "가구수":6968,
      "노인수":732,
      "아저씨":1359,
      "어린이":4627
   },
   {
      "지역명":"무안군 일로읍",
      "남자":3659,
      "여자":3243,
      "가구수":3526,
      "노인수":8711,
      "아저씨":8758,
      "어린이":4099
   },

   ....

   {
      "지역명":"무안군 운남면",
      "남자":7357,
      "여자":7667,
      "가구수":3624,
      "노인수":8110,
      "아저씨":8042,
      "어린이":9618
   }
]

sheetjs 라이브러리는 엑셀을 읽는 기능 뿐만 아니라 생성도 가능하며 정교한 처리가 가능합니다.

Javascript 기반의 압축 라이브러리, jszip

웹에서는 로컬에 저장된 여러 개의 파일을 사용하기 위해서는 사용자가 해당 파일들을 모두 마우스를 통한 직접적인 선택 행위가 적용되어야 보안상에 문제가 발생하지 않습니다. 이에 대한 대안은 여러개의 파일을 하나의 파일로 묶아 압축하고 압축된 파일 하나에만 이러한 사용자의 선택 행위가 적용되도록 하는 것입니다. 물론 네트워크를 통한 파일의 접근에는 이러한 문제가 발생하지 않습니다.

여튼, 여러 개의 파일이 하나로 묶인, 하나의 압축 파일로써 zip을 처리할 수 있는 자바스크립트 기반의 라이브러리가 몇가지 되는데.. 그중 제가 사용한 라이브러리를 소개합니다. 바로 jszip인데요. 아래의 해맑고 환하게 웃는 인상좋은 개발자의 github에 방문해 다운로드 받을 수 있습니다.

jszip 라이브러리 이외에도 이를 좀더 쉽게 사용하기 위해서 jszip-utils 라이브러리도 함께 받았는데, 위의 그림에서 이 2개의 라이브러리에 대한 다운로드는 파랑색 외곽선 박스로 언급해 두었습니다.

사용코드는 아래와 같습니다. 만약 자바스크립트의 promise라는 개념을 이해하고 있다면 매우 심플하고 직관적이라는 것을 알 수 있습니다. IO 처리이므로 당연이 비동기방식으로 처리됩니다. 과거 버전에서는 동기 방식도 지원했던거 같은데, 제거된 것 같습니다.





위의 코드에서는 압축 파일 안에 저장된 하나 하나의 파일에 순차적으로 접근해서 압축을 풀고, 풀어진 데이터를 ArrayBuffer 타입으로 전달받도록 21번 째 코드가 file.async(“arraybuffer”)라고 지정되어 있으나, arraybuffer 대신 string, blob로도 지정하여 각각 텍스트, BLOB 타입으로도 전달받을 수 있습니다.

현대의 웹은 무한한 접근성이라는 장점은 있으나 여전이 데스크탑 환경에 비해 처리 속도가 느리지만, 이런 문제점 조차도 웹어셈블리 등의 다양한 기술을 통해 극복해 나가고 있습니다. 향후 몇년안에 모든 프로그램은 서비스화될 것이라고 생각되고, 프로그램의 서비스화에는 JavaScript라는 핵심적인 언어가 중추적인 역할을 할 것입니다.