[Sheet.js, XLSX] 웹으로 엑셀 파일 데이터 추출

Sheet.js(XLSX)란?

엑셀 파일(.xlsx, .xls)를 읽어 JavaScript 객체 배열 형태의 JSON 데이터로 변환해 주는 라이브러리. 데이터를 변환해 API 전송을 용이하게 해줌.

SheetJS는 프로젝트의 이름이고, 라이브러리 이름이 XLSX다.

관련 링크 및 라이브러리 추가

(깃허브 링크)

https://github.com/SheetJS/sheetjs

GitHub - SheetJS/sheetjs: 📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs

 

 

(라이브러리 링크)

https://cdn.sheetjs.com/

SheetJS - CDN

 

 

2-1. 라이브러리 추가 방법

상단 링크에 접속후, 원하는 목표에 맞는 타입과 버전을 선택하면 url을 얻을 수 있습니다.

저는 html상에서 간단한 코드를 작성할 것이기 때문에 Standalone 타입을 사용했습니다.

`<script src="<a href=https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js>https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js</a>"></script>`

예시 코드

<input type="file" onchange="excel(event)">
    <script>
        async function excel(event){
            let input = event.target;
            let file = input.files[0];
            //확장자 검사
            if(!file.name.endsWith('.xlsx') && !file.name.endsWith('.xls')){
                alert("엑셀 파일만 업로드 가능.");
                return;
            }
            try{
                //파일을 ArrayBuffer로 읽고 Uint8Array로 변환
                let arrayBuffer = await file.arrayBuffer();
                let fileData = new Uint8Array(arrayBuffer);

                //엑셀 데이터 읽기
                let workBook = XLSX.read(fileData, {type: 'array'});

                //첫 번째 시트의 데이터를 JSON으로 변환
                let rowObj = XLSX.utils.sheet_to_json(workBook.Sheets[workBook.SheetNames[0]])

                console.log(rowObj);
            }catch(error){
                console.error('파일 처리 중 오류 발생 :', error);
                alert('파일 처리 중 오류 발생.');
            }
        }
    </script>

코드 설명

event.target : 이벤트가 발생한 요소인 <input type="file" onchange="excel(event)">태그를 의미한다.

files[0] : files는 사용자가 선택한 파일 목록을 의미한다. <input type="file"> 요소인 input에 .files 속성을 사용하면 접근할 수 있다. 배열처럼 인덱스로 접근 가능하다. (files[0]은 첫 번째 파일을 의미한다. 보통 한 개의 파일만 선택하므로 인덱스 0을 사용.)

arrayBuffer : 순수 이진 데이터(버퍼)를 저장하는 그릇이다. 단순한 메모리 공간에 불과해, 데이터를 다루기 위해선 Uint8Array와 같은 도구가 필요하다.

Uint8Array : 8비트(1바이트) 부호 없는 정수형 배열로, 메모리 공간 위에서 데이터를 저장하고 조작할 수 있게 해준다.

워크북이란?

엑셀 파일 내 여러 시트(Sheet)들을 하나로 묶은 것을 의미함.

쉽게 비유한다면,

• 워크북 = 엑셀 파일 전체(책)
• 시트 = 엑셀 파일 안의 개별 페이지

왜 필요할까?

각 시트를 개별적으로 관리하고 선택할 수 있음. 원하는 시트만 JSON으로 바꾸거나 시각화할 수 있음.

결과물

-입력한 엑셀 데이터

데이터 출처 - https://data.seoul.go.kr/dataList/262/S/2/datasetView.do#

-개발자도구 콘솔에 출력된 결과물