[TIL] 엑셀데이터 json변환-SheetJs

사용자가 엑셀 파일을 업로드 할 때, ‘SheetJS’ 라이브러리를 활용하여 데이터 추출하는 방법을 정리해보려고 한다.

‘SheetJS’는 파일에서 가져온 blob 형태의 엑셀 데이터를 다양한 포맷으로 변환할 수 있는 함수들은 제공하며, CSV, Text, HTML, array of objects, list of formulae 와 같은 포맷의 종류가 있다.

그 중 sheet_to_json를 통해 엑셀 데이터를 Json로 파싱해보겠다.

1. 인풋 엘리먼트의 파일 타입에서 발생한 이벤트의 타겟을 추출한다.

let reader = new FileReader()

2. 파일리더 인스턴스를 생성한 뒤, readAsBinaryString() 를 통해 Blob 혹은 File 객체로 데이터를 읽는다.

reader.readAsBinaryString(file)

3. 데이터를 성공적으로 읽어오면, 비동기 함수인 onload() 이벤트 핸들러가 발생하며 이때 CallBack 함수로 원하는 동작을 명시해준다.

reader.onload = async function (e) {
}

4. CallBack 함수 안에서는 read() 함수로 저장된 데이터를 추출하고 추출한 데이터의 시트정보를 가져온 뒤 스프레드시트의 내용을 원하는 포맷으로 읽어오도록 한다.

reader.onload = async function (e) {
    let data = e.target.result
    let workbook = read(data, { type: 'binary' })
    // 엑셀 파일의 시트이름전체를 배열로 추출할 때는 workBook.SheetNames.forEach

    let sheet = workbook.Sheets[workbook.SheetNames[0]]
    const excelData = utils.sheet_to_json(sheet, {
      header: state.HEADER,
      range: 1,
      raw: false,
    })

• sheet_to_json 함수는 옵션을 추가할 수가 있는데, 두번째 인자에 header(엑셀 필드명을 원하는 네이밍으로 세팅) & raw(셀 데이터를 정제되지 않은 값 혹은 포맷된 스트링 형태로 보여주기) & range(열거할 수 있거나 아닌 속성으로 보여주기)

5. sheet에 담긴 데이터를 토대로 필요한 형태로 가공한 뒤 화면에 뿌려주면 된다.

SheetJs 라이브러리가 없던 시절에는 순수 자바스크립트로 데이터를 뽑아오고 가공했을 텐데, 그 방법이 궁금해진다.

굳이(?) 라는 생각이 들지만 라이브러리 없이 엑셀 데이터를 추출하는 연습을 해보려고 한다.

To be continue..