티스토리 뷰

UI(Front-End)

SheetJS : JS로 엑셀 파일 읽기 예제

까오기 까오기 2019. 6. 29. 21:41

그동안 엑셀 파일은 서버로 업로드를 하고 백엔드에서 읽어서 처리했는데 얼마 전에 javascript로 처리하는 것을 보습니다. 

우와~~~ 

파일 업로드 처리는 항상 귀찮은 일 중 하나였는데 이제 쉽게 처리할 수 있습니다.

간단한 라이브러리 추가 만으로 끝~~~  

엑셀 파일을 읽고 쓰는게 서버에서 처리할 필요가 전혀 없었습니다. 

많은 사람들이 알고 있었던 거 같은데 전 이제야 알게되어 부끄럽습니다. 

 

SheetJS Github : 문서 및 소스, 다운로드

https://github.com/SheetJS/js-xlsx 

 

SheetJS/js-xlsx

:green_book: SheetJS Community Edition -- Spreadsheet Parser and Writer - SheetJS/js-xlsx

github.com

참고할 CDN 주소 

https://cdnjs.com/libraries/xlsx

 

xlsx - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

xlsx - Excel (XLSB/XLSX/XLSM/XLS/XML) and ODS spreadsheet parser and writer - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

cdnjs.com

엑셀 파일 읽기 간단 예제

1. HTML 작업

1-1. 라이브러리 추가 

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>

1-2. 버튼 이벤트 추가

<input type="file" id="excelFile" onchange="excelExport(event)"/>

2. SCRIPT 

<script>
function excelExport(event){
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function(){
        var fileData = reader.result;
        var wb = XLSX.read(fileData, {type : 'binary'});
        wb.SheetNames.forEach(function(sheetName){
	        var rowObj =XLSX.utils.sheet_to_json(wb.Sheets[sheetName]);
	        console.log(JSON.stringify(rowObj));
        })
    };
    reader.readAsBinaryString(input.files[0]);
}
</script>

3. 결과 : console.log

[{"상품코드":10001,"상품명":"상품1","가격":10000,"분류":"패션","상태":"Y"},{"상품코드":10002,"상품명":"상품2","가격":20000,"분류":"잡화","상태":"Y"},{"상품코드":10003,"상품명":"상품3","가격":30000,"분류":"가구","상태":"Y"},{"상품코드":10004,"상품명":"상품4","가격":40000,"분류":"의류","상태":"Y"}]

 

너무 간단하지 않나요. 

json 형태로 결과를 읽어서 서버 쪽에 RequestBody로 던지고 서버쪽에서 Object에 매핑하여 처리한다면 소스가 더 없이 깔끔할거 같습니다. 

 

실무에서 위에 나온 소스 정도면 무리없이 적용할 수 있을 거 같습니다.

 

엑셀 파일 첫번째 시트만 읽을 것이고 경우에 따라 json, csv, html 형태가 필요한 경우 예제를 간단하게 만들어 보겠습니다. 

 

소스 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js excel example 03</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
<script>
function excelExport(event){
	excelExportCommon(event, handleExcelDataAll);
}
function excelExportCommon(event, callback){
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function(){
        var fileData = reader.result;
        var wb = XLSX.read(fileData, {type : 'binary'});
        var sheetNameList = wb.SheetNames; // 시트 이름 목록 가져오기 
        var firstSheetName = sheetNameList[0]; // 첫번째 시트명
        var firstSheet = wb.Sheets[firstSheetName]; // 첫번째 시트 
        callback(firstSheet);      
    };
    reader.readAsBinaryString(input.files[0]);
}
function handleExcelDataAll(sheet){
	handleExcelDataHeader(sheet); // header 정보 
	handleExcelDataJson(sheet); // json 형태
	handleExcelDataCsv(sheet); // csv 형태
	handleExcelDataHtml(sheet); // html 형태
}
function handleExcelDataHeader(sheet){
    var headers = get_header_row(sheet);
    $("#displayHeaders").html(JSON.stringify(headers));
}
function handleExcelDataJson(sheet){
    $("#displayExcelJson").html(JSON.stringify(XLSX.utils.sheet_to_json (sheet)));
}
function handleExcelDataCsv(sheet){
    $("#displayExcelCsv").html(XLSX.utils.sheet_to_csv (sheet));
}
function handleExcelDataHtml(sheet){
    $("#displayExcelHtml").html(XLSX.utils.sheet_to_html (sheet));
}
// 출처 : https://github.com/SheetJS/js-xlsx/issues/214
function get_header_row(sheet) {
    var headers = [];
    var range = XLSX.utils.decode_range(sheet['!ref']);
    var C, R = range.s.r; /* start in the first row */
    /* walk every column in the range */
    for(C = range.s.c; C <= range.e.c; ++C) {
        var cell = sheet[XLSX.utils.encode_cell({c:C, r:R})] /* find the cell in the first row */

        var hdr = "UNKNOWN " + C; // <-- replace with your desired default 
        if(cell && cell.t) hdr = XLSX.utils.format_cell(cell);

        headers.push(hdr);
    }
    return headers;
}
</script>
</head>
<body>
파일 선택 : <input type="file" id="excelFile" onchange="excelExport(event)"/>
<h1>Header 정보 보기</h1>
<div id="displayHeaders"></div>
<h1>JSON 형태로 보기</h1>
<div id="displayExcelJson"></div>
<h1>CSV 형태로 보기</h1>
<div id="displayExcelCsv"></div>
<h1>HTML 형태로 보기</h1>
<div id="displayExcelHtml"></div>
</body>
</html>

결과

이외에 상세한 정보는 해당 사이트에서 필요한 정보를 찾아 보시는게 제일 좋을 거 같습니다. 

 

GITHUB

https://github.com/kkaok/examples/blob/master/jsExcelExample/src/main/resources/static/html/js-excel-example03.html

 

kkaok/examples

example. Contribute to kkaok/examples development by creating an account on GitHub.

github.com

엑셀 쓰기 예제

2019/06/30 - [UI(Front-End)] - SheetJS : JS로 엑셀 파일 쓰기 예제

댓글
  • 프로필사진 ㄱㄱㄱ 간단하게 그냥 읽고 쓰는건 편했지만, 엑셀 파일 내의 스타일을 추가하고 변경하려는 작업을 하려거든 비용을 지불하고 유료버전으로... 하..ㅆ 2019.08.01 17:27
  • 프로필사진 까오기 까오기 엑셀을 꾸밀려고 하면 개발 비용이 어마 어마 하게들 수 밖에 없죠. ^^
    보통 엑셀로 무언가 주고 받는다면 대고객 서비스는 아닐테고 B2B나 ERP 일텐데 비용 많이 들고 유료 써도 원하는 결과물 얻기 어려울거라 설명해 주면 다들 수긍하더라구요.
    2019.08.01 17:36 신고
  • 프로필사진 강성주 ie11 에서 오류가는데 혹시 해결하셨나요? ㅠ
    개체가 'readAsBinaryString' 속성이나 메서드를 지원하지 않습니다.

    2019.08.28 15:12
  • 프로필사진 까오기 까오기 저는 그런 오류가 발생하지 않아서 잘 모르겠네요.
    나중에 테스트 해보도록 하겠습니다.

    좋은 하루되세요.
    2019.09.16 18:07 신고
  • 프로필사진 뷰개발자 예제를 따라하다가 너무 이해가 안되서 그러는데 혹시 죄송하지만 export가 아니라 import아닌가요...? 2020.02.20 17:53
  • 프로필사진 까오기 까오기 엑셀 파일 읽어서 화면에 뿌려 주는 거면 import가 맞습니다.
    제가 읽고 쓰는거 샘플 만들다가 실수했나 보네요^^

    좋은 하루되세요.
    2020.03.03 20:07 신고
  • 프로필사진 kim json으로 데이타 볼때 날짜는 어떻게 처리하시나요/??? 2019-09-08 날짜 값이 이상하게 처리되서 나오네요...json일 경우에만요... 2020.04.01 10:54
  • 프로필사진 까오기 까오기 서버쪽에서 데이터를 내려 줄 때 타입일 날짜 관련 된 경우 long 값으로 내려 갑니다.
    해당 값을 날짜로 파싱하고 원하시는 포맷으로 보여 주시면 됩니다.
    2020.04.02 14:02 신고
  • 프로필사진 ??? 같은 파일을 두 번 연속해서 올릴 경우, reader.onload를 아예 타지 않는 것 같은데 이 경우는 어떻게 해결해야하나요? 2020.07.27 18:01
댓글쓰기 폼