자바스크립트 엑셀기능 추가

테이블에 데이터를 넣어서 UI를 표현하는데 이걸 엑셀로 저장하기를 클라이언트가 원할 수도 있다.

그래서 자바스크립트를 이용해서 엑셀기능을 만들어볼거다!!

우선 엑셀라이브러리를 설치한다.

npm i xlsx --save
or
yarn add xlsx

우선 최종 코드를 보여주자면 이렇게 된다!

import xlsx from 'xlsx';

로 처음으로 import를 해준다

const workSheet = xlsx.utils.json_to_sheet(list);

는 json파일을 엑셀의 시트로 변환시켜주는 친구다

메소드로는 이렇게 다양하다!!

xlsx.utils.sheet_to_csv generates CSV
xlsx.utils.sheet_to_txt generates UTF16 Formatted Text
xlsx.utils.sheet_to_html generates HTML
xlsx.utils.sheet_to_json generates an array of objects
xlsx.utils.sheet_to_formulae generates a list of formulae

  const workBook = xlsx.utils.book_new();
        xlsx.utils.book_append_sheet(workBook, workSheet, 'sheet title');
        xlsx.writeFile(workBook, '파일이름설정.xlsx');

는 새로운 워크북. 즉, 시트들을 포함하는 워크북 객체를 생성하고 그 워크북에 방금 생성한 워크시트를 묶어주는 부분입니다.
그리고 마지막에 파일을 다운받을때 뜨게할 파일명을 설정해 줄 수 있다.

 ['등록날짜', '닉네임', '식물명', '식물애칭', '물주기', '물주기 알림', '마지막 물 준날'].forEach((x, idx) => {
            const cellAdd = xlsx.utils.encode_cell({ c: idx, r: 0 });
            workSheet[cellAdd].v = x;
        });

이렇게 쓴 이유는 데이터는 보통 영어로 되있기 때문에 가독성이 좋게 한글로 표현하기 위해 미리 키값을 변경해 놓는것 !

        workSheet['!cols'] = [];
        workSheet['!cols'][5] = { hidden: true };

는 숨기고 싶은 값을 보이지 않도록 5번째 idx라고 설정을 해두고 hidden처리해둔다

첫번째 줄은 꼭 써줘야합니다 !
왜냐면 workSheet 객체에는 !cols 속성이 지정되어 있지 않기 때문에 명시적으로 선언 과정이 필요합니다.