Converti i file Excel (xlsx, xls, CSV) in formato JSON in React.

Feb 12 2023
Abbiamo tutti file Excel in giro che devono essere convertiti in JSON. Ma il problema è come lo facciamo? Bene, ci sono molti modi e alcuni sono migliori di altri.
Foto di Lautaro Andreani su Unsplash

Abbiamo tutti file Excel in giro che devono essere convertiti in JSON. Ma il problema è come lo facciamo? Bene, ci sono molti modi e alcuni sono migliori di altri. In questo blog, ti mostrerò come convertire facilmente i tuoi file excel in un formato JSON usando Node.js.

Cos'è React?

React è una libreria JavaScript gratuita e open source per la creazione di interfacce utente basate su componenti dell'interfaccia utente, sviluppata da Meta precedentemente noto come Facebook.

Cos'è JSON?

JSON è l'acronimo di JavaScript Object Notation. JSON è un formato standard basato su testo per rappresentare i dati strutturati in base alla sintassi degli oggetti JavaScript. È comunemente usato per la trasmissione di dati nelle applicazioni web.

Iniziamo!

Per convertire i file Excel in formato JSON, utilizzeremo la libreria "xlsx" che offre un'ampia gamma di funzionalità per lavorare con fogli di calcolo e manipolarne il contenuto. Puoi installare questa libreria eseguendo il seguente comando nel tuo terminale:

npm install xlsx

Per leggere il file Excel, è necessario utilizzare il metodo FileReader dal file xlsx. Dopo aver ricevuto i dati dal file excel, puoi utilizzare il sheet_to_jsonmetodo della libreria xlsx per convertirli in formato JSON.

import React, { useState } from 'react';

const Test = () => {
const submitHandler=(e)=>{

    if (e.target.files) {
        const reader = new FileReader();
        reader.onload = (e) => {
            const data = e.target.result;
            const workbook = read(data, { type: "array" });
            const fileName= workbook.SheetNames[0];
            const sheet = workbook.Sheets[fileName];
            const json = utils.sheet_to_json(sheet);
            console.log("json",json);
        };
        reader.readAsArrayBuffer(e.target.files[0]);
    }
   }
<div>
 <input type="file" onChange={submitHandler}/>
</div>
}
export default Test

Abbiamo utilizzato il seguente file excel per convertirlo in JSON.

Dopo aver caricato questo file excel, otterremo i dati JSON. Qui abbiamo visualizzato i dati JSON nella tabella.

Grazie per aver letto l'articolo e spero che ti sia stato utile.

Link utili :

PS: "Nessuna violazione del copyright prevista, Happy Coding."

https://www.linkedin.com/in/yash-baviskar-82250a113