[React] 데이터 엑셀 저장 기능 구현하기

엄청 간단한 엑셀 저장 기능을 구현할 수 있는 라이브러리를 발견했다!

 

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

xlsx

 

npm install xlsx

 

 

xlsx 라이브러리를 설치해주기

 

다른 기능도 많지만, 정말 간단하게 버튼을 클릭하면 데이터를 엑셀로 저장하는 기능을 구현하기 위해 아래처럼 코드를 작성할 수 있다.

import React from 'react';
import * as XLSX from "xlsx/xlsx.mjs";

const ExcelDownload = () => {
  const fileName = '파일 이름'; // 다운로드할 파일 이름
  const data = [
    { name: "John", age: 30, city: "New York" },
    { name: "Jane", age: 25, city: "San Francisco" },
  ];

  const handleDownload = () => {
    const datas = data?.length ? data : []; // data가 없으면 빈 배열
    const worksheet = XLSX.utils.json_to_sheet(datas); // JSON 데이터를 시트로 변환
    const workbook = XLSX.utils.book_new(); // 엑셀 파일 생성하기
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 생성된 엑셀 파일에 'Sheet1' 시트 추가
    XLSX.writeFile(workbook, fileName ? `${fileName}.xlsx` : "data.xlsx"); // 엑셀 파일로 저장 후 fileName 이름으로 저장
  };

  return (
    <>
      <button onClick={handleDownload}>
        엑셀 저장
      </button>
    </>
  );
};

export default ExcelDownload;

 

 

data가 엑셀로 잘 저장이 된다!