[vue/nuxt] excel file import file (엑셀 파일 읽기)

nuxt 를 통해서 엑셀 파일을 읽는 방법에 대해서 알아보자.

 

우선 html <input> file의 onChange 이벤트로 파일 데이터를 가져온다. 

	<input type="file" text="불러오기" @change="readExcelFile" />

...

    data() {
        return {
            fileReader: null,
            sheetNameList: [],
            excelDataList: []
        }
    },

...

    readExcelFile(event) {

        let input = event.target
        let file = input.files[0]
        let fileName = file.name
        let extension = fileName.split('.')[1]
        let includeExtension = ['xlsx', 'csv', 'xls']

        if (!includeExtension.includes(extension)) {
            alert('엑셀 형식의 파일을 넣어주세요.')
            return
        }

        this.fileReader = new FileReader()
        this.fileReader.onload = this.onLoadFile
        this.fileReader.readAsBinaryString(file)

        event.target.value = ''
    },

 

fileReader를 만들고 해당 reader에 onload 이벤트를 넣어서 

파일이 읽히고 난 후 이벤트 처리를 한다. 

 

        onLoadFile() {
            if (!this.fileReader) return

            let data = this.fileReader.result
            let workBook = XLSX.read(data, {type: 'binary'})

            // set sheet name
            this.sheetNameList = workBook.SheetNames

            // read sheet
            let rowDataList = []
            this.sheetNameList.forEach((name, index) => {
                let rows = XLSX.utils.sheet_to_json(workBook.Sheets[name])
                console.log(rows)

                rowDataList[index] = rows
            })

            this.excelDataList = rowDataList
            console.log(this.excelDataList)
        }

 

나는 xlsx의 sheet_to_json 을 사용하여 데이터를 수집하였고

공식 문서의 opt에 보면 [header: 1]로 첫번째 행이 json key 값으로 들어가게 된다. 

npm xlsx 주소

 

다른 sheet_to 함수는 다음과 같다. 

npm xlsx 패이지 참조

끝.