[react-csv] react 엑셀 파일로 내보내기

 

yarn add react-csv --save;
// 또는 
npm install react-csv --save;

 

npm i --save-dev @types/react-csv

설치한 후에,

 

CSVLink 또는 CSVDownload 컴포넌트를 import한다. 

 

CSVLink -  하이퍼링크를 보여주고 그것을 누르면 다운로드 할 수 있게끔 한다. 

 

 

Props : data, headers, separator, enclosingCharacter

filename, onClick

 

import { CSVLink } from "react-csv";

const headers = [
  { label: "First Name", key: "details.firstName" },
  { label: "Last Name", key: "details.lastName" },
  { label: "Job", key: "job" },
];

const data = [
  { details: { firstName: "Ahmed", lastName: "Tomi" }, job: "manager" },
  { details: { firstName: "John", lastName: "Jones" }, job: "developer" },
];
export default function ScanDataListUI({
  detailClick = () => {},
  addClick = () => {},
  ...props
}) {
  return (
    <div>
      <CSVLink
        headers={headers}
        data={data}
        filename={"my-file.csv"}
        className="btn btn-primary"
        target="_blank"
      >
        Download me
      </CSVLink>
      
      ... 생략

 

헤더와 데이터는 샘플 데이터

 

 

header의 label은 맨 위에 배치가 된다. (First Name, Last Name, Job)

 

 

 

 

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

react-csv