SheetJS 를 이용하여 xlsx 데이터 를 json 으로 만들기

- 나의 상황

: 화면에서 엑셀을 업로드 받아 상품 목록 데이터를 읽어 db에 저장해야했다.

백엔드에서 처리해도 되는데 javascript 로도 처리할 수 있다고하여 도전.

 

1. 라이브러리 추가.

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

 2. script

나는 file 의 change 이벤트로 처리했다. 

$("#file").on("change", (event)=>{
    let input = event.target;
    let reader = new FileReader();
    let rows;
    reader.onload = async function () {
        let data = reader.result;
        let workBook = XLSX.read(data, { type: 'binary'});
        workBook.SheetNames.forEach(function (sheetName) {
            rows = XLSX.utils.sheet_to_json(workBook.Sheets[sheetName]);
            console.log(rows);
        });

        // 서버로 전송
        ...생략...

        input.value = ''; //파일 업로드 후 같은 파일 업로드 시 이벤트 감지 위해 추가.
    };
    reader.readAsBinaryString(input.files[0]);
});

 

결과는 아래와 같다!

업로드한 엑셀파일

콘솔 로그

 

여기서 끝나면 참 좋은데.. 

내 양식 예시..

나는 업로드해야하는 엑셀의 양식이 조금 달라 header 의 위치가 달랐으며.. header 를 엑셀에 적힌 값이 아닌 다른 이름으로 바꾸고 싶었으며.. 제조일의 형식도 엑셀의 Date 형식으로 넘어왔기 때문에 바꿔야했다!!

첨에는 rows 를 반복문돌리면서  key 값을 바꾸고 date 값을 new Date((row.date - (25567 + 1))*86400*1000) 막 이렇게.. 바꿨는데.. 완전 쉽게 해결가능한 방법이 있었다. 그래..라이브러리 만드는 대단한 분들이 이런 것도 안넣었겠냐구..

암튼 아래처럼 해주면 끝!

 rows = XLSX.utils.sheet_to_json(workBook.Sheets[sheetName]);
 
 => rows = XLSX.utils.sheet_to_json(workBook.Sheets[sheetName], 
	{header:["sirialNo", "productName", "modelName","date"] //header 명 변경을 위해 지정
	, range:3		//헤더 위치 지정
	, raw:false		//date cell 을 문자로 인식하지않도록 하는 옵션
	, dateNf:'yyyy-mm-dd'});	//date format 지정

콘솔 로그!!

끝!

 

참조한 고마운 분들의 링크

https://eblo.tistory.com/83

https://stackoverflow.com/questions/53163552/format-date-with-sheetjs

https://github.com/SheetJS/sheetjs