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

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 ( 엑셀 내보내기!! ); }

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

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

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

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

from http://webigotr.tistory.com/330 by ccl(A) rewrite - 2021-03-31 23:00:18