[Vue.js] Excel 파일 JSON Data로 Parsing

요즘엔 브라우저도 성능이 좋아져서 Excel을 Parsing 하는걸 서버에 맡기지 않고 웹상에서 처리를 많이 합니다.

Excel 파일을 업로드해서 Parsing 하는 코드를 알아보겠습니다.

 

xlsx 모듈 설치

npm install xlsx

 

태그 추가

기본 input tag의 file 타입으로 업로드 했을때 입니다.
기본 허용하는 mime-type은 xlsx 로 아래와 같이 설정하면 됩니다.

<input type="file" id="excelUpload" @change="importExcel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"></input>

 

Script 추가

 

methods 영역에 추가하시면 됩니다. 여기서 parsing해서 items 변수에 json data로 저장을 하는 코드입니다.

items를 활용해서 table의 입력값으로 활용할 수 도 있습니다.

아래 reader.onload 에서 data를 얻어오는 부분은 둘 중 하나로 하시면 됩니다.

importExcel(event) {
    const file = event.target.files[0];
    let reader = new FileReader();
    reader.onload = (e) => {
        let data = reader.result;
        // let data = e.target.result;
        let workbook = XLSX.read(data, {type: 'binary'});
        workbook.SheetNames.forEach(sheetName => {
            const roa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
            this.items.push(roa);
        });
    };
    reader.readAsBinaryString(file);
},