프로젝트를 중 다운로드된 엑셀 파일을 수정 후 업로드하는 로직을 구현해야했다. 하지만 우리 팀에서는 정해진 형식으로 api로 보내야했고, 그렇기 위해서는 Json 변환이 1차적으로 필요했다.
엑셀파일을 Json변환시키기 위해 사용한 방법은 크게
FileAPI와 SheetJS이다.
FileAPI 란?
HTML5 부터 브라우저는 File API 지원하기 시작한다.
File API 는 아래와 같이 정의되어 있다.
- FileList : 파일 리스트
- File : 파일 데이터
- FileReader : 파일 읽기
- Blob : 바이트 데이터
자세한 내용은 아래의 링크를 참고하길 바란다.
https://w3c.github.io/FileAPI/#FileReader-interface
주의할 점은 FileReader는 파일을 읽는 것까지만 제공합니다. 엑셀파일의 내용을 읽고 JSON으로 변환하기 위해서 자바스크립트 라이브러리를 이용해야 한다.
SheetJS 란?
웹브라우저에서 또는 서버에서 엑셀 파일 형식의 스프레드시트를 읽고, 편집하고, 저장할 수 있는 자바스크립트 라이브러리이다.
SheetJS는 보시는 것처럼 html + javascript만으로 엑셀 파일을 핸들링할 수 있다는 게 장점이다.
이 또한 자세한 사항은 아래 링크를 참조하길 바란다.
https://sheetjs.com/
일단 코드를 돌려보기 전 아래 링크에서 라이브러리 파일( xlsx.min.js )을 다운로드합니다.
https://github.com/SheetJS/js-xlsx/tree/master/dist
🔔 xlsx.min.js 파일이 있어야 제대로 작동이 된다
👀 이제 코드를 볼 차례이다.
아래는 1번은 내가 처음 사용한 코드이다.
하지만 1번의 경우는 내가 프로젝트르 진행하는데 있어 문제가 있었다. 고객측에서 IE버전을 호환가능하게 요청하였지만 아래의 경우는 기능이 작동하지 않았다.
하지만 요즘 IE는 잘 쓰지 않는 추세이니.. Chrome, FireFox로만 충분하다면 아래의 코드로 해도 무방할 듯 하다.😅
💡 1 ) Chrome, FireFox 가능
$("#선택한 파일").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
});💡 2 ) IE, Chrome, FireFox 가능
위의 1번과 다르게 고쳐할 부분은 크게 두곳이다.
첫번째는 IE에서 sheetjs 호환성 문제가 발생했다.. 다운그레이드를 하려고 했지만 그렇게 따지면.. 건드려야할 부분은 꽤 있었고.. 꽤나 복잡했다ㅜㅜ
구글링 중 babel이라는 아주 좋은 컴파일러를 발견하였다 😘
Babel 이란?
Babel은 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스컴파일러이다.
<head>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.4/polyfill.min.js"></script>
</head>
두번째는 IE에서도 호환가능하게 하기 위해서 File Reader객체의 onload Event Handler를 구현하는 함수 부분에 추가를 해주었고,
마지막 reader.readAsBinaryString(f); -> reader.readAsArrayBuffer(f); 로 변경해주었다.
let binary = "";
let bytes = new Uint8Array(oFile.target.result);
let length = bytes.byteLength;
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}여기서부터 전체 함수이다.
$("#선택한 파일").on("change", function (e) {
let files = e.target.files;
let i, f;
for (i = 0; i != files.length; ++i) {
f = files[i];
let reader = new FileReader();
reader.onload = function (e) {
let data = e.target.result;
let binary = "";
let bytes = new Uint8Array(data);
let length = bytes.byteLength;
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
let workbook = XLSX.read(binary, {type: 'binary'});
workbook.SheetNames.forEach(function (item, index, array) {
EXCEL_JSON = XLSX.utils.sheet_to_json(workbook.Sheets[item]);
});
};
reader.readAsArrayBuffer(f); //파일객체를 읽는다. 완료되면 원시 이진 데이터가 문자열로 포함됨.
}
});📍 다음 글에서는 위의 코드를 활용하여 엑셀파일을 Json 변환 후 키값 변경을 간단히 하는 방법에 대해서 게시할 예정이다.
IE 브라우저 너무 싫어요.. 언제 사라질까요? 😕😕😕