React – Excel Dosyalarını Yükleyelim/Önizleme Yapalım

Bu blog gönderisindeki eğitimle React uygulamalarınızda Excel dosyalarını zahmetsizce nasıl yükleyeceğinizi ve görüntüleyeceğinizi öğreneceğiz. React ile web geliştirme becerilerinizi geliştirmek için diğer blog gönderilerini inceleyebilirsiniz. Şimdi hemen başlayalım ve projelerinizi Excel dosya entegrasyonuyla güçlendirelim!

app.js

import { useState } from "react";
import * as XLSX from 'xlsx';

function App() {

  // onchange states
  const [excelFile, setExcelFile] = useState(null);
  const [typeError, setTypeError] = useState(null);

  // submit state
  const [excelData, setExcelData] = useState(null);

  // onchange event
  const handleFile=(e)=>{
    let fileTypes = ['application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','text/csv'];
    let selectedFile = e.target.files[0];
    if(selectedFile){
      if(selectedFile&&fileTypes.includes(selectedFile.type)){
        setTypeError(null);
        let reader = new FileReader();
        reader.readAsArrayBuffer(selectedFile);
        reader.onload=(e)=>{
          setExcelFile(e.target.result);
        }
      }
      else{
        setTypeError('Please select only excel file types');
        setExcelFile(null);
      }
    }
    else{
      console.log('Please select your file');
    }
  }
  
  // submit event
  const handleFileSubmit=(e)=>{
    e.preventDefault();
    if(excelFile!==null){
      const workbook = XLSX.read(excelFile,{type: 'buffer'});
      const worksheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[worksheetName];
      const data = XLSX.utils.sheet_to_json(worksheet);
      setExcelData(data.slice(0,10));
    }
  }

  return (
    <div className="wrapper">

      <h3>Upload & View Excel Sheets</h3>

      {/* form */}
      <form className="form-group custom-form" onSubmit={handleFileSubmit}>
        <input type="file" className="form-control" required onChange={handleFile} />
        <button type="submit" className="btn btn-success btn-md">UPLOAD</button>
        {typeError&&(
          <div className="alert alert-danger" role="alert">{typeError}</div>
        )}
      </form>

      {/* view data */}
      <div className="viewer">
        {excelData?(
          <div className="table-responsive">
            <table className="table">

              <thead>
                <tr>
                  {Object.keys(excelData[0]).map((key)=>(
                    <th key={key}>{key}</th>
                  ))}
                </tr>
              </thead>

              <tbody>
                {excelData.map((individualExcelData, index)=>(
                  <tr key={index}>
                    {Object.keys(individualExcelData).map((key)=>(
                      <td key={key}>{individualExcelData[key]}</td>
                    ))}
                  </tr>
                ))}
              </tbody>

            </table>
          </div>
        ):(
          <div>No File is uploaded yet!</div>
        )}
      </div>

    </div>
  );
}

export default App;

import { useState } from "react";

import * as XLSX from 'xlsx';

function App() {

// onchange states

const [excelFile, setExcelFile] = useState(null);

const [typeError, setTypeError] = useState(null);

// submit state

const [excelData, setExcelData] = useState(null);

// onchange event

const handleFile=(e)=>{

let fileTypes = ['application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','text/csv'];

let selectedFile = e.target.files[0];

if(selectedFile){

if(selectedFile&&fileTypes.includes(selectedFile.type)){

setTypeError(null);

let reader = new FileReader();

reader.readAsArrayBuffer(selectedFile);

reader.onload=(e)=>{

setExcelFile(e.target.result);

}

else{

setTypeError('Please select only excel file types');

setExcelFile(null);

}

else{

console.log('Please select your file');

}

// submit event

const handleFileSubmit=(e)=>{

e.preventDefault();

if(excelFile!==null){

const workbook = XLSX.read(excelFile,{type: 'buffer'});

const worksheetName = workbook.SheetNames[0];

const worksheet = workbook.Sheets[worksheetName];

const data = XLSX.utils.sheet_to_json(worksheet);

setExcelData(data.slice(0,10));

}

return (

<h3>Upload & View Excel Sheets</h3>

{/* form */}

<button type="submit" className="btn btn-success btn-md">UPLOAD</button>

{typeError&&(

<div className="alert alert-danger" role="alert">{typeError}</div>

)}

</form>

{/* view data */}

{excelData?(

<thead>

<tr>

{Object.keys(excelData[0]).map((key)=>(

))}

</tr>

</thead>

<tbody>

{excelData.map((individualExcelData, index)=>(

{Object.keys(individualExcelData).map((key)=>(

<td key={key}>{individualExcelData[key]}</td>

))}

</tr>

))}

</tbody>

</table>

</div>

):(

<div>No File is uploaded yet!</div>

)}

</div>

);

}

export default App;

Github: https://github.com/fatihsoysal/React-Upload-And-View-Excel-Files

ReactJS

Permalink: https://fatihsoysal.com/blog/react-uzerinde-excel-dosyalarini-yuklemek-ve-goruntulemek/

0 Yorum

Inline Feedbacks

View all comments

Freelance Proje İş Alımı

Kategoriler

React – Excel Dosyalarını Yükleyelim/Önizleme Yapalım

Fatih Soysal