오늘은 클라이언트에서, 즉, 순수하게 html과 javascript만으로 엑셀 파일을 핸들링하는 방법과 어떤 경우에 활용했는지
알아보겠습니다.
일단, 기존에는 엑셀파일을 핸들링할 때 서버단에서 JAVA를 이용해서 엑셀 파일을 읽거나 만들어야 했는데, HTML5에서 FileReader 객체를 지원하게 되면서 엑셀과 같은 파일을 읽거나 만들 수 있게 되었습니다.
HTML5의 FileReader를 이용해서 파일 읽기
HTML5의 FileReader 란?
HTML5의 FileReader 객체를 MDN에서는 아래와 같이 설명하고 있습니다.
FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해 줍니다.
File 객체는 <input> 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체, 드래그 앤 드롭으로 반환된 DataTransfer 객체 혹은 HTMLCanvasElement의 mozGetAsFile() API로 부터 얻습니다.
<input type="file" id="my_file_input">
$("#my_file_input").on("change", function(e){
var files = e.target.files; //input file 객체를 가져온다.
var i,f;
for (i = 0; i != files.length; ++i) {
f = files[i];
var reader = new FileReader(); //FileReader를 생성한다.
//성공적으로 읽기 동작이 완료된 경우 실행되는 이벤트 핸들러를 설정한다.
reader.onload = function(e) {
...엑셀파일을 읽어서 처리하는 로직...
};
//파일객체를 읽는다. 완료되면 원시 이진 데이터가 문자열로 포함됨.
reader.readAsBinaryString(f);
}//end. for
});
기본적인 소스코드는 단순합니다. 아마 위에 예시로 든 코드만으로도 파일을 읽을 수 있습니다.
사용자가 선택한 File 객체 정보
e.target.files를 통해 가져온 파일 객체는 아래와 같은 정보를 가지고 있습니다.
혹시 파일명이나 size 등을 체크하실 때 사용하시면 될 거 같네요.
FileReader 이벤트 핸들러
FileReader는 파일 읽기 시작할 때, 끝날 때, 에러 발생한 경우, 진행 중인 경우 등에 사용할 수 있는 다양한
이벤트 핸들러를 제공합니다.
FileReader.onabort
abort 이벤트의 핸들러. 이 이벤트는 읽기 동작이 중단될 때마다 발생합니다.
FileReader.onerror
error 이벤트의 핸들러. 이 이벤트는 읽기 동작에 에러가 생길 때마다 발생합니다.
FileReader.onload
load 이벤트의 핸들러. 이 이벤트는 읽기 동작이 성공적으로 완료되었을 때마다 발생합니다.
FileReader.onloadstart
loadstart 이벤트 핸들러. 이 이벤트는 읽기 동작이 실행될 때마다 발생합니다.
FileReader.onloadend
loadend 이벤트 핸들러. 이 이벤트는 읽기 동작이 끝났을 때마다 발생합니다. (읽기의 성공이나 실패 여부는 상관 않습니다.)
FileReader.onprogress
progress 이벤트 핸들러. 이 이벤트는 Blob 컨텐트를 읽는 동안 호출됩니다.
developer.mozilla.org
엑셀 파일의 내용을 읽어서 JSON으로 변환
FileReader는 파일을 읽는 것까지만 제공합니다. 이제 엑셀파일의 내용을 읽고 JSON으로 변환하기 위해 유능하신 분이 만드신 자바스크립트 라이브러리를 이용해야 합니다.
SheetJS 란?
웹브라우저에서 또는 서버(아마도 node.js를 말하는 듯)에서 엑셀 파일 형식의 스프레드시트를 읽고, 편집하고, 저장할 수 있는 자바스크립트 라이브러리입니다.
일단 아래 링크에서 라이브러리 파일( xlsx.min.js )을 다운로드합니다.
https://github.com/SheetJS/js-xlsx/tree/master/dist
그리고 앞에서 예제로 사용한 코드 중 파일 읽기가 완료된 이후(FileReader.onload) 로직을 수정합니다.
예제 소스
$("#my_file_input").on("change", function(e){
var files = e.target.files; //input file 객체를 가져온다.
var i,f;
for (i = 0; i != files.length; ++i) {
f = files[i];
var reader = new FileReader(); //FileReader를 생성한다.
//성공적으로 읽기 동작이 완료된 경우 실행되는 이벤트 핸들러를 설정한다.
reader.onload = function(e) {
var data = e.target.result; //FileReader 결과 데이터(컨텐츠)를 가져온다.
//바이너리 형태로 엑셀파일을 읽는다.
var workbook = XLSX.read(data, {type: 'binary'});
//엑셀파일의 시트 정보를 읽어서 JSON 형태로 변환한다.
workbook.SheetNames.forEach(function(item, index, array) {
EXCEL_JSON = XLSX.utils.sheet_to_json(workbook.Sheets[item]);
});//end. forEach
}; //end onload
//파일객체를 읽는다. 완료되면 원시 이진 데이터가 문자열로 포함됨.
reader.readAsBinaryString(f);
}//end. for
});
3~4줄의 코드만으로 엑셀 파일의 내용을 JSON으로 만들어서 리턴해줍니다. (정말 머리가 좋은 거 같습니다. )
SheetJS는 보시는 것처럼 html + javascript만으로 엑셀 파일을 핸들링할 수 있다는 게 장점입니다.
화면에 보이는 데이터를 엑셀로 바로 만들어서 다운로드까지 가능합니다.
좀 더 자세한 사항은 아래 Sheet.js를 방문해서 확인해보세요.
sheetjs.com
어떤 경우에 사용했나?
개발할 때 메서드명, 클래스명 등 영어 약어를 생각해내는 게 귀찮을 때가 있습니다.
여러 명이 개발하게 되면 동일한 단어(의미)인데도 서로 다른 영어 약어를 사용하는 경우가 있죠.
그래서 보통은 한글-영어-약어를 정의하게 됩니다. (표준용어 정의)
표준용어를 이용해서 쉽게 영어 약어를 만들어주는 기능을 개발해서 사용했습니다.
1. 표준용어 정의된 엑셀 파일을 만든다(보통 DBMS 관리 툴에 표준용어 정의한게 등록되어 있습니다.)
2. 엑셀파일을 이용해서 내가 여러 한글 단어를 조합해서 입력하면 영어 약어가 만들어진다.
(예 : 엑셀 다운로드 기능 --> excelDwldSkll)
실제 구현 화면
