엑셀은 다양한 데이터 보고에 널리 활용되고 있습니다. ReactJS 애플리케이션에서는 exceljs 라이브러리를 사용하여 Excel 파일을 동적으로 생성할 수 있습니다. 이 문서에서는 Excel 보고서를 생성하고 다운로드하기 위해 React 앱에서 exceljs를 구현하는 방법을 안내합니다.
설정 및 설치
먼저 exceljs 라이브러리를 설치하세요. 터미널을 열고 React 프로젝트 디렉터리에서 다음 명령을 실행하세요.
npm install exceljs file-saver
exceljs 라이브러리는 통합 문서(Excel 파일)를 생성하고 조작하는 데 사용되며, 파일 저장기는 브라우저에서 파일 다운로드를 처리합니다.
1단계: Excel 내보내기 기능 만들기
ImportToExcel.js와 같은 새 구성 요소 파일을 만듭니다. 이 구성 요소에서는 통합 문서 및 워크시트 생성을 처리하고 생성된 Excel 파일을 저장하는 내보내기Excel 기능을 생성합니다.
import React from 'react'; import ExcelJS from 'exceljs'; import { saveAs } from 'file-saver'; const ExportToExcel = ({ data, fileName }) => { const exportExcel = async () => { // 1. Create a new workbook const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('Data Report'); // 2. Define the table headers worksheet.columns = [ { header: 'ID', key: 'id', width: 10 }, { header: 'Name', key: 'name', width: 30 }, { header: 'Email', key: 'email', width: 30 }, { header: 'Join Date', key: 'joinDate', width: 20 }, ]; // 3. Insert data into the worksheet data.forEach((item) => { worksheet.addRow({ id: item.id, name: item.name, email: item.email, joinDate: item.joinDate, }); }); // 4. Style the header worksheet.getRow(1).eachCell((cell) => { cell.font = { bold: true }; cell.alignment = { horizontal: 'center' }; }); // 5. Save the workbook as an Excel file const buffer = await workbook.xlsx.writeBuffer(); const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); saveAs(blob, `${fileName}.xlsx`); }; return ( <button onClick={exportExcel}>Download Excel</button> ); }; export default ExportToExcel;
2단계:ExportToExcel 구성 요소 사용
ImportToExcel 컴포넌트를 생성한 후 App.js 등 관련 파일에서 사용하세요. Excel로 내보낼 수 있는 데이터가 준비되어 있는지 확인하세요.
import React from 'react'; import ExportToExcel from './ExportToExcel'; const App = () => { const data = [ { id: 1, name: 'Name 1', email: 'Name1@example.com', joinDate: '2023-01-15' }, { id: 2, name: 'Name 2', email: 'Name2@example.com', joinDate: '2023-02-20' }, // Add more data as needed ]; return ( <div> <h1>Export Data to Excel</h1> <ExportToExcel data={data} fileName="Data_Report"/> </div> ); }; export default App;
exceljs를 사용하면 ReactJS에서 Excel 보고서를 생성하는 것이 쉽고 유연해집니다. 이 가이드에서는 헤더, 데이터 삽입 및 기본 헤더 스타일을 사용하여 Excel 보고서를 만드는 방법을 보여줍니다.
위 내용은 엑셀 js 리액트 JS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!