[React] react-csv 사용 데이터 csv 파일 다운로드

React-csv

react-csv

 

React-csv 라이브러리 다운로드

npm install react-csv
npm install @types/react-csv
or
yarn add react-csv
yarn add @types/react-csv

CSVLink 와 CSVDownload

CSVLink

 - 해당 링크를 클릭하면 csv 파일이  다운로드된다

CSVDownload

 - 컴포넌트가 마운트될때 csv 파일이 자동 다운로드된다

 

// header 변수를 선언
const headers = [
  { label: "Name", key: "name" },
  { label: "Email", key: "email" },
  { label: "Gender", key: "gender" }
  { label: "Phone", key: "phone" }
]

const data = [
  { name: "홍길동", email: "aaa@bbb.com", gender: "남", phone:"01012345678"},
  { name: "고길동", email: "aaa@bbb.com", gender: "여", phone:"01010101010"},
  { name: "이길동", email: "aaa@bbb.com", gender: "남", phone:"01098765432"},
];

header의 label은 csv 파일 시트에 표시되는 값 (th 같은 값)

header의 key값과 data의  key값이 같아야 보여진다 

import { CSVLink, CSVDownload }  from 'react-csv';
import moment from 'moment/moment';

// data, header를 CSVLink 컴포넌트에 적용
<CSVLink
    headers={headers}
    data={data}
    className="btn btn-csv"
    filename={`${moment(startDate).format('YYYY.MM.DD')}_${moment(endDate).format('YYYY.MM.DD')}_user_data.csv`}
	target="_blank"
>엑셀(CSV) 다운로드
</CSVLink>;

// or

<CSVDownload headers={headers} data={data} target="_blank" />;

csv 파일이라 스타일은 입힐 수 없다