React에서 exceljs 사용하기 및 엑셀 내보내기(다운로드) 에러 해결

필수 library

npm i exceljs
npm i file-saver

exceljs에서는 아쉽게도 client쪽에서 엑셀 다운로드가 지원되지 않는다고 합니다.

따라서 file-saver라는 library를 이용하여 다운로드 합니다.

예제 코드 입니다.

import React from "react";
import * as ExcelJS from "exceljs";
import { saveAs } from "file-saver";
export default function Excel() {
  const handleExcel = async () => {
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet("My Sheet"); // sheet 이름이 My Sheet

    // sheet 데이터 설정
    worksheet.columns = [
      { header: "Id", key: "id", width: 10 },
      { header: "Name", key: "name", width: 32 },
      { header: "D.O.B.", key: "DOB", width: 10, outlineLevel: 1 },
    ];

    worksheet.addRow({ id: 1, name: "John Doe", dob: new Date(1970, 1, 1) });
    worksheet.addRow({ id: 2, name: "Jane Doe", dob: new Date(1965, 1, 7) });

    // 다운로드
    const mimeType = { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" };
    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], mimeType);
    saveAs(blob, "testExcel.xlsx");
  };
  return (
    <div>
      <button onClick={handleExcel}>엑셀 내보내기!!</button>
    </div>
  );
}

ref:

www.npmjs.com/package/exceljs?source=post_page---------------------------

www.npmjs.com/package/file-saver

javascript.plainenglish.io/export-data-to-excel-in-angular-using-exceljs-305ba8c5dece

github.com/exceljs/exceljs/issues/460

exceljs는 스타일 같은 기능을 무료로 사용할 수 있습니다.

xlsx(sheetjs) 에서는 pro version을 구입해야 합니다.

xlsx가 사용자도 많고 기능도 많아 보이지만 pro version을 구입하는게 부담이 되는 분들에게는 exceljs가 괜찮은 선택지 같습니다.