Sangil's blog

https://github.com/ChoiSangIl Admin

VUE 엑셀(EXCEL) 업로드 EXCEL TO JSON) DEV / WEB

2020-09-22 posted by sang12


VUE에서 엑셀 업로드를 하는데 JSON으로 변경해서 서버로 전송하는 방법이 있다는 것을 알았다. 파일로 전송해서 북치고 장구치고 하는것보다 좋은 방법인거 같다 (참고: https://godd.tistory.com/41)

VUE CLI환경에서 업로드 하다보니 약간 다른점과 JSON 키값을 영어로 바꾸는 부분에서 삽질한게 있어 추가로 작성한다. 

npm install xlsx 명령어로 xlsx 모듈을 받는다.

--xlsx 모듈 import

import XLSX from 'xlsx';

--input event 설정

<input type="file" @change="readFileaccept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">

--excel to json

 readFile(event) {
      const file = event.target.files[0];
      let reader = new FileReader();
      let tmpResult = {};
      reader.onload = (e=> {
          let data = reader.result;
          let workbook = XLSX.read(data, {type: 'binary'});
          workbook.SheetNames.forEach(sheetName => {
              workbook.Sheets[sheetName].A1.w = "test1";
              workbook.Sheets[sheetName].B1.w = "test2";
              workbook.Sheets[sheetName].C1.w = "test3";
              workbook.Sheets[sheetName].D1.w = "test4";
              
              console.log(workbook.Sheets[sheetName].A1);
              const roa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
              tmpResult = roa;
          });
          console.log(tmpResult);
          this.excelJsonData=tmpResult;
      };
      reader.readAsBinaryString(file);
}

필자는 사용하면서 아래와 같은 엑셀데이터를 업로드 했는데  json 데이터의 키값이 한글로(상품,가격,옵션,옵션2,옵션3)으로  만들어지게 되어 이를 영어로 바꾸고 싶었다. 그래서 구글링을 해보니 위처럼 workbook.Sheets[sheetName].A1.w 값을 변경해주면 내가 원하는 키값으로 데이터를 가져 올 수 있다. 엑셀의 헤더값을 영어로바꿀까 했지만.. 사용자가 더 보기 좋게 한글로 하고.. 뒤에서 한번 더 바꾸는 방법으로 구현하기로 했다.

상품가격옵션옵션2옵션3
카니발3천만원abc
레이1천만원cba


#sheet_to_json header rename #sheet_to_json header
REPLY