[React - Xlsx & react-csv ] 엑셀 다운로드 만들기!

들어가며!

처음에 csv파일과 xlsx의 차이를 잘 몰라 어떤것을 선택해 엑셀로 변환시킬까 고민하다가 두 타입의 차이점을 알아보았다.

csv

1. MS-Excel, Google Sheet등 과 같은 다양한 스프레시트에서 사용할 수 있습니다.
2. xlsx에 비해 쉽고 빠르게 읽을 수 있다.
3. 단순 읽고 쓰는 정도라면 csv추천

xlsx

1. 기능이 많다.
2. csv에비해 무겁다.

참고 : https://wisenrich.com/%EC%97%91%EC%85%80xls%ED%8C%8C%EC%9D%BC%EA%B3%BC-csv-%EC%9A%A9%EB%8F%84-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80/

 

-------

둘 중 필요한거 확인 후! 세팅!

csv

csv형식으로 만들때 사용할 패키지는 react-csv이다.

npm i react-csv

//https://www.npmjs.com/package/react-csv

해당 링크에 들어가면 다양한 예시코드가 존재하는데 정말 그대로 사용하면 됩니다!

제가 사용한 방법은, 다양한 방법 중 가장 가독성이 좋다고 판단한 array of literal objects 입니다.

data = [
  { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
  { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
  { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
];

다운받을때는

import { CSVLink, CSVDownload } from "react-csv";
 
//데이터

<CSVLink data={csvData}>Download me</CSVLink>;

작성해주시면 됩니다!

xlsx

다음 패키지를 로드합니다

npm i xlsx

//https://www.npmjs.com/package/xlsx

다운로드 버튼 세팅

<CommonButton className='excel-btn' onClick={()=> excelDownload(columns)}>
   엑셀 다운로드
 </CommonButton>

기능 세팅

  const excelDownload = (columns) => {
    const ws = xlsx.utils.json_to_sheet(columns);
    const wb = xlsx.utils.book_new();

    xlsx.utils.book_append_sheet(wb, ws, 'Sheet1');
    xlsx.writeFile(wb, `${state.title}_${Date.now()}.xlsx`);
  };

 xlsx.utils.book_append_sheet(wb, ws, 'Sheet1');
시트 이름을 지정해줄 수 있습니다

 xlsx.writeFile(wb, `${state.title}_${Date.now()}.xlsx`);
한글이름으로 파일명을 지정해줄건데, 중복 다운로드하면 (1), (2) ... 가 파일명 뒤에 붙으므로 Date.now()함수를 통해 타임스템프를 찍어줍니다.

다른 방법으로 참고한 블로그

https://wickedmagica.tistory.com/248