>  기사  >  웹 프론트엔드  >  엑셀 js 리액트 JS

엑셀 js 리액트 JS

Barbara Streisand
Barbara Streisand원래의
2024-11-16 12:57:03606검색

Excel js   React JS

엑셀은 다양한 데이터 보고에 널리 활용되고 있습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.