VUE 엑셀(EXCEL) 업로드 EXCEL TO JSON) DEV / WEB
2020-09-22 posted by sang12
VUE에서 엑셀 업로드를 하는데 JSON으로 변경해서 서버로 전송하는 방법이 있다는 것을 알았다. (참고: https://godd.tistory.com/41)
상황에 따라 다르겠지만, 엑셀파일을 json형태로 변경해서 서버로 전송하는 방법도 괜찮은 방법 같다.
VUE CLI환경에서 업로드 하다보니 약간 다른점과 JSON 키값을 영어로 바꾸는 부분에서 삽질한게 있어 추가로 작성한다.
npm install xlsx 명령어로 xlsx 모듈을 받는다.
--xlsx 모듈 import
import XLSX from 'xlsx';
--input event 설정
<input type="file" @change="readFile" accept="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천만원 | a | b | c |
| 레이 | 1천만원 | c | b | a |
#sheet_to_json header rename
#sheet_to_json header
REPLY