ReactJS에서 JSON 데이터를 xlsx로 다운로드 하기

22 Jan 2021

Reading time ~1 minute

JSON 데이터를 xlxs 형식으로 다운로드 하기 by ReactJS

일반적으로 json 데이터를 xlsx로 서버단에서 변환하고 response로 쏘아서 다운로드를 하고 있습니다. ReactJS를 사용하면서, 화면내에 있는 데이터를 xlsx로 다운로드 하고 싶어서 찾아보니, file-saver라는 모듈이 있네요.

jons을 XLSX형식으로 변환하는 모듈은 xlsx을 사용하였습니다.

예제

#index.jsx
import "./styles.css";
import { saveAs } from "file-saver";
import * as XLSX from 'xlsx';

export default function App() {
  const fileType =
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
  const fileExtension = ".xlsx";
  const ws = XLSX.utils.json_to_sheet([
    {
      id: 1,
      name: "Daniel",
      age: "20",
      sex: "M"
    },
    {
      id: 2,
      name: "Kim",
      age: "30",
      sex: "M"
    },
    {
      id: 3,
      name: "Lee",
      age: "33",
      sex: "M"
    },
    {
      id: 4,
      name: "Min",
      age: "50",
      sex: "F"
    },
    {
      id: 5,
      name: "Yun",
      age: "20",
      sex: "F"
    }
  ]);

  const fileDownload = () => {
    const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
    const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const data = new Blob([excelBuffer], { type: fileType });
    saveAs(data, `file${fileExtension}`);
  };

  return (
    <div className="App">
      <h1>JSON to XLSX</h1>
      <button onClick={fileDownload}>FILE DONWLOAD</button>
    </div>
  );
}

예제 바로가기

이전에는 더 복잡하게 처리 했었는데, file-saver를 사용하면 쉽게 frontend에서도 다운로드 구현이 가능합니다.

참고 자료