[작성자:] 김 형준

몇 일전에 웹에서 자바스크립트만으로 압축 파일의 압축을 해제하는 내용을 정리했습니다. 해당 글은 아래와 같습니다.

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

이제는 다시 웹에서 사용자가 만든 어떤 데이터를 하나의 압축 파일로 만들 필요가 있어, 앞서 살펴본 압축 라이브러리를 이용해 바이너리 데이터와 텍스트 데이터를 각각 file.bin과 file.txt라는 파일명으로 하여 하나의 a.zip 파일로 압축한 후 사용자의 PC에 다운로드 하는 코드를 정리합니다.

먼저 압축하고자 하는 바이너리 데이터를 아래의 코드처럼 준비합니다.

let buffer = new ArrayBuffer(8);
let dataview = new DataView(buffer);

dataview.setInt32(0, 9438);
dataview.setFloat32(4, 3224.3224);

위의 데이터는 file.bin이라는 파일명으로 압축파일에 존재하도록 아래처럼 코드를 추가합니다.

let zip = new JSZip();
zip.file("file.bin", buffer);

앞서 언급했듯, 바이너리 뿐만 아니라 텍스트 파일도 압축 파일에 추가해 봅니다. 아래처럼요.

zip.file("file.txt", 'Hello한글Hi!');

이제 이렇게 압축된 내용을 a.zip 파일로 저장하는 코드는 다음과 같습니다.

let zipFileName = 'a.zip';
zip.generateAsync({ type: "blob" }).then(
    function (blob) {
        if (isIE()) {
            saveToFile_IE(zipFileName, blob);
        } else {
            saveToFile_Chrome(zipFileName, blob);
        }
    }
);

못보던 isIE와 saveToFile_IE, saveToFile_Chrome 함수가 보입니다. 이 놈들은 아래의 글을 참고하시면 파악할 수 있답니다.

웹에서 Javascript 만으로 텍스트 파일 생성

서버측의 기술없이 클라이언트 기술만으로 로컬에 저장된 엑셀 파일을 다룰 수 있는 라이브러리인 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 라이브러리는 엑셀을 읽는 기능 뿐만 아니라 생성도 가능하며 정교한 처리가 가능합니다.