프로그래밍/JavaScript

[Javascript] 자바스크립트, 리액트 xlsx 라이브러리 사용법

Gooding 2023. 6. 23. 20:11
728x90
반응형

xlsx 라이브러리 사용법 간단 정리

리액트에서 엑셀 업로드해서 데이터 가져오기위해 사용했던 라이브러리

 


사용법

설치하기

npm install xlsx
# or
yarn add xlsx

 

사용하기

업로드 하는 코드만 정리함

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

const ExcelUploader = () => {
  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: 'array' });

      // 첫 번째 시트를 가져옴
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];

      // 셀 데이터를 파싱하여 출력
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      console.log(jsonData);
    };

    reader.readAsArrayBuffer(file);
  };

  return (
    <div>
      <input type="file" onChange={handleFileUpload} />
    </div>
  );
};

export default ExcelUploader;
반응형