자바스크립트 엑셀 업로드(xlsx)

회사 업무중 엑셀파일을 업로드하여 엑셀에 입력된값에 맞게 데이터를 수정하여
JSON 형태로 서버에 보내줘야만 했다.

기존에는 엑셀을 csv 확장자로 업로드하는 방식이였다.

csv방식

이 방법은 아래 사진과같이 매번 다른 형식으로 저장하여 csv 파일을 업로드해야해서 불필요한 작업요소가 생기기 마련이다.

사진출처

그래서 xlsx확장자인 엑셀을 그대로 업로드하여 파싱하고자 라이브러리를 찾아보던 도중
xlsx 라는 라이브러리를 발견했다.
npm 링크
xlsx는 우리에게 필요한 json 객체를 반환해주고 파일 업로드 및 파일 다운로드를 간편하게 할 수 있는데,
기존의 바닐라 js로 작성된 코드와 비교해보자.

기존 csv 코드

csvParse(csv_string) {
    const rows = csv_string.split("\r\n");
    const jsonArray = []; 
    const header = rows[0].split(",");
    for (let i = 1; i < rows.length; i++){
      let obj = {};
      let row = rows[i].split(",");
      for (let j = 0; j < header.length; j++) {
        obj[header[j]] = row[j];
      }
      jsonArray.push(obj); // 각 내용 행의 객체를 jsonArray배열에 담기
    }
    return jsonArray;
  }
  
readCsv(inputValue:any):void {
	const file:File = inputValue.files[0];
    const myReader:FileReader = new FileReader();
    myReader.onloadend = (e) => {
		const jsonList에 = this.csvParse(myReader.result);
		// jsonList에 데이터를 추가하는 로직은 여기서 추가한다.
	}
myReader.readAsText(file,"utf-8");
}

uploadCsv($event): void {
   this.readCsv($event.target);
}

xlsx 라이브러리 적용 코드

  uploadCsv($event): void {
    this.onXlsxParse($event);
  }

  onXlsxParse(event: any) {
    /* wire up file reader */
    const target: DataTransfer = <DataTransfer>event.target;
    if (target.files.length !== 1) {
      throw new Error('Cannot use multiple files');
    }
    const reader: FileReader = new FileReader();
    reader.readAsBinaryString(target.files[0]);
    reader.onload = (e: any) => {
      /* create workbook */
      const binarystr: string = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(binarystr, { type: 'binary' });

      /* selected the first sheet */
      const wsname: string = wb.SheetNames[0];
      const ws: XLSX.WorkSheet = wb.Sheets[wsname];

      /* save data */
      const data = XLSX.utils.sheet_to_json(ws); // to get 2d array pass 2nd parameter as object {header: 1}
      this.jsonList = data;
		// jsonList에 데이터를 추가하는 로직은 여기서 추가한다.
    };
  }

코드의 줄개수로는 별차이가 없지만 장점은 크게 두가지 였다.

1. csv코드에서처럼 우리가 직접 json객체를 생성하여 json파일을 관리할 필요가 없다.
   2.csv파일로 변환하지 않고 xlsx파일 그대로 업로드해도 데이터 추출이 가능했다.

특히나 2번 과정이 엑셀을 업로드해주시는 관리자분이 굉장히 좋아하셨다.

엑셀은 개발자 뿐만아니라 많은 분들이 사용하시니까, 엑셀,혹은 파일을 자바스크립트로 다루는 방법을 익혀두면 좋다고 생각들었다