리액트에서 엑셀(csv) 다운로드 기능을 추가 해봐요

페이지의 데이터테이블에 대한 엑셀 다운로드 기능이 필요하게 되어 엑셀 다운로드를 추가했어요

react-csv를 통해 엑셀 다운로드 기능을 구현합니다

• 설치

npm install react-csv --save

react-csv는 셀에 표시할 데이터와 데이터의 셀제목만 간단히 주입해주면 주입받은 값들을 csv로 다운받을 수 있게 해줘요

• SAMPLE

import { CSVLink } from "react-csv"; // load

const ExcelHeader = [
  { label: "이름", key: "name" },
  { label: "가격", key: "price" },
  { label: "종류", key: "category" }
];

const ExcelData = [
  { name: "따릉이", price: 300, category: "자전거" },
  { name: "킥고잉", price: 1500, category: "킥보드" },
  { name: "따릉이", price: 2, category: "자전거 },
];


<CSVLink
    headers={ExcelHeader} // header
	data={ExcelData} // data
>
다운로드
</CSVLink>

ExcelHeader에 object key값은 ExcelData의 key와 매칭되며, label은 화면에 표시 될 텍스트에요

위 샘플코드처럼 CSVLink 를 import 한 후, 해당 컴포넌트에 headers와 data props를 각각 주입하면 .csv 파일로 다운로드를 할 수 있어요

(만약 .csv로 다운로드를 하였는데 셀 제목의 텍스트가 깨진다면 ("\uFEFF따릉이")와 같이 utf-8 bom 문자열을 추가 하면 정상적으로 나오는 것을 확인할 수 있어요.)