[React] Sheet.js 라이브러리를 이용한 Excel Export

✅SheetJS

💡 스프레드시트 읽기, 편집 및 내보내기가 필요할 때 사용할 수 있는 라이브러리

SheetJS Community Edition | SheetJS Community Edition

리액트에서 엑셀파일 내보내기 기능을 구현하고자 사용하게 되었다.

👉설치 npm i --save https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz
https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz

📍제공되는 format

• aoa_to_sheet converts an array of arrays of JS data to a worksheet.
• json_to_sheet converts an array of JS objects to a worksheet.
• table_to_sheet converts a DOM TABLE element to a worksheet.
• sheet_add_aoa adds an array of arrays of JS data to an existing worksheet.
• sheet_add_json adds an array of JS objects to an existing worksheet.

참고: https://sanghye.tistory.com/35

App.tsx

import { utils, writeFile } from "xlsx";
import dayjs from "dayjs";

export default function App() {
// 정제된 데이터를 담아줄 state
const [exportArr, setExportArr] = useState([])
// 정제될 대상의 Array
const userList = [{
name: "haewon",
age: 28,
job: "FE"
},
...]

  function ExportHandler() {
		const excelTableHead = [["이름", "나이", "직업"]];
		// excel 문서 만들기
    const wb = utils.book_new();
		// 열 순서를 sheet화 
    const ws = utils.json_to_sheet([]);
		// ws에 excelTableHead를 추가
    utils.sheet_add_aoa(ws, excelTableHead);

    // 예외처리 userList가 있을 경우에만 Export
    if (userList.length > 1) {
      for (let i in userList) {
				// 데이터가공
        const processedData = {
          userName: userList[i].name,
					userAge: userList[i].age,
					userJob: userList[i].job
        };
        exportArr.push(processedData);
      }
    }

    utils.sheet_add_json(ws, exportArr, { origin: "A2", skipHeader: true });
    utils.book_append_sheet(wb, ws, "Report");
		// 두 번째 arg에는 export 될 파일의 이름을 넣어주면 된다.
    writeFile(wb, `Report_${dayjs(new Date()).format("YYYY-MM-DD")}.xlsx`);
    // Export될 데이터를 담았던 Array 초기화 해주기
    setExportArr([]);
  }

return (
<>
<button onClick={ExportHandler}>Export</button>
</>
)}

잘못된 부분이 있으면 피드백 부탁드립니다.🦾