엑셀 업로드로 읽고, 엑셀 다운로드 하기

miin·2024년 12월 2일
0

Skill Collection [Function]

목록 보기
48/48
  • 엑셀 업로드해서 첫번째 시트의 A열 데이터 추출
  • 뿌려준 데이터로 엑셀 다운로드
import React, { useState } from 'react';
import * as XLSX from 'xlsx';

const ExcelHandler = () => {
  const [fileData, setFileData] = useState([]);
  const [outputData, setOutputData] = useState([
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 }
  ]); // 예시 데이터

  // 엑셀 파일 업로드 처리
  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        const arrayBuffer = event.target.result;
        const workbook = XLSX.read(arrayBuffer, { type: 'array' });

        // 첫 번째 시트 데이터 읽기
        const sheet1 = workbook.Sheets[workbook.SheetNames[0]];
        const data1 = XLSX.utils.sheet_to_json(sheet1, { header: 1 });

        // 두 번째 시트 데이터 읽기
        const sheet2 = workbook.Sheets[workbook.SheetNames[1]];
        const data2 = XLSX.utils.sheet_to_json(sheet2, { header: 1 });

        // A열 데이터 추출
        const columnAData1 = data1.map((row) => row[0]); // 첫 번째 시트의 A열
        const columnAData2 = data2.map((row) => row[0]); // 두 번째 시트의 A열

        setFileData({ sheet1: columnAData1, sheet2: columnAData2 });
      };
      reader.readAsArrayBuffer(file); // ArrayBuffer로 파일을 읽기
    }
  };

  // 엑셀 다운로드 처리
  const handleDownload = () => {
    const ws1 = XLSX.utils.json_to_sheet(outputData); // 첫 번째 시트 데이터
    const ws2 = XLSX.utils.json_to_sheet(outputData); // 두 번째 시트 데이터

    // 엑셀 워크북에 시트 추가
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws1, 'Sheet 1');
    XLSX.utils.book_append_sheet(wb, ws2, 'Sheet 2');

    // 엑셀 파일 다운로드
    XLSX.writeFile(wb, 'output.xlsx');
  };

  return (
    <div>
      <h2>엑셀 파일 업로드</h2>
      <input type="file" onChange={handleFileUpload} accept=".xlsx, .xls" />
      
      <h3>업로드한 A열 데이터</h3>
      <div>
        <h4>첫 번째 시트 A</h4>
        <ul>
          {fileData.sheet1 && fileData.sheet1.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
        <h4>두 번째 시트 A</h4>
        <ul>
          {fileData.sheet2 && fileData.sheet2.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>

      <h2>엑셀 파일 다운로드</h2>
      <button onClick={handleDownload}>엑셀 파일 다운로드</button>
    </div>
  );
};

export default ExcelHandler;

엑셀 폼 다운로드 받는 기능

import React from "react";
import * as XLSX from "xlsx";

const ExcelDownload = () => {
  const handleDownload = () => {
    // 데이터 정의
    const data = [["테스트1", "테스트2", "테스트3"]]; // 헤더만 포함된 데이터

    // 워크시트 생성
    const worksheet = XLSX.utils.aoa_to_sheet(data); // Array of Arrays 데이터를 시트로 변환
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 워크북에 시트 추가

    // 엑셀 파일 생성
    XLSX.writeFile(workbook, "test.xlsx");
  };

  return (
    <button
      onClick={handleDownload}
      style={{
        padding: "10px 20px",
        backgroundColor: "#007bff",
        color: "#fff",
        border: "none",
        borderRadius: "5px",
        cursor: "pointer",
      }}
    >
      엑셀 다운로드
    </button>
  );
};

export default ExcelDownload;

0개의 댓글

관련 채용 정보