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="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