Pubblicato il

javascript

excel

come creare file excel e come convertire tabella html in file excel con javascript

Ciao a tutti e benvenuti in questa guida JavaScript dove vi mostro una libreria chiamata SheetJS. Questa libreria ci permette di lavorare con file Excel all’interno del browser usando codice JavaScript. In particolare, SheetJS ci permette di eseguire operazioni come: Creare file Excel con JavaScript, Convertire una tabella HTML in un file Excel e convertire un file Excel in una tabella HTML. Cominciamo con la guida!

Come installare SheetJS

Prima di tutto, dobbiamo scaricare e collegare la libreria al nostro progetto (file) HTML. Possiamo scaricare il file JS (xlsx.mini.js) della libreria direttamente da GitHub: https://github.com/SheetJS/js-xlsx/blob/master/xlsx.mini.js

Se preferite potete trovare la repository usando il sito di SheetJS

Se non sapete come scaricare un singolo file da GitHub potete consultare la nostra guida
In alternativa, se non volete scaricare il file, potete linkare direttamente la libreria servita dal CDN usando il tag:
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>


Inoltre, per salvare il file Excel dal browser al PC del client dovrete includere una libreria chiamata filesaver.js

Questa libreria può essere inclusa con il tag:

<script type="text/javascript" src=https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js></script>

Come creare un file Excel con Javascript e SheetJS

Ora che abbiamo installato la libreria nel nostro web project, andiamo a vedere come possiamo generare un file Excel usando un semplice codice JavaScript. In basso potete trovare il codice commentato che spiega tutti i passi necessari.

<!DOCTYPE html>
<html>
<head>
    <title>Guida SheetJS</title>
</head>
<body>
    <!-- librerie -->
    <script type="text/javascript" src=https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js></script>
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    <script type="text/javascript">
    <!-- creare nuovo book (file excel) -->
    var fileExcel = XLSX.utils.book_new()
    // modificare le proprietà del file
    fileExcel.Props = {
        Title: "Guida SheetJS",
        Subject: "Test",
        Author: "Pierpaolo Lucarelli",
        CreatedDate: new Date()
    };
    // creare un nuovo foglio
    fileExcel.SheetNames.push("foglio test")
    // valori da inserire nel file excel sotto forma di un array di array (matrice). (array esterno = riga, array interno = colonna)
    var dati = [ ["Ciao", "Devnews!"], ["Ciao", "Devnews2"], ["Ciao", "Devnews3"]] // Tre righe con due colonne per esempio
    var foglio_con_dati = XLSX.utils.aoa_to_sheet(dati);
    fileExcel.Sheets["foglio test"] = foglio_con_dati;
    var fileExcelOutput = XLSX.write(fileExcel, {bookType:'xlsx', type: 'binary'});
    // funzione per convertire il file nel giusto formato
    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    // funzione per salvare il file. Solitamente si mette all'interno di una callback
    saveAs(new Blob([s2ab(fileExcelOutput)],{type:"application/octet-stream"}), 'test.xlsx');
    </script>
</body>
</html>


Come potete vedere prima creiamo un nuovo file Excel con la funzione book_new().

Poi specifichiamo le proprietà del file come: il nome del file, autore e data di creazione. In seguito creiamo un foglio Excel in cui andremo ad inserire i nostri dati. Poi creiamo una matrice contenente i dati da inserire nel foglio. Possiamo considerare la matrice come un foglio excel dove l’array esterno è la riga e l’array interno è la colonna di un file Excel. Infine salviamo il file sul filesystem del client. Nell’esempio in alto, la funzione per salvare il file è stata posizionata in modo da essere eseguita in automatico al caricamento della pagina ma è più consigliabile salvare il file usando un bottone HTML.

Come convertire una tabella HTML in un file Excel con JavaScript

Ora vediamo come convertire una tabella creata con codice HTML in un file Excel. In basso vediamo il codice per fare ciò.
<!DOCTYPE html>
<html>
<head>
    <title>Guida SheetJS</title>
</head>
<body>
    <!-- librerie -->
    <script type="text/javascript" src=https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js></script>
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    <table id="tabella">
        <tr>
            <th>Nome</th>
            <th>Cognome</th>
            <th>Età</th>
        </tr>
        <tr>
            <td>Luca</td>
            <td>Rossi</td>
            <td>25</td>
        </tr>
    </table>
    <script type="text/javascript">
    var fileExcel = XLSX.utils.table_to_book(document.getElementById('tabella'),{sheet:"foglio test"});
    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    var fileExcelOutput = XLSX.write(fileExcel, {bookType:'xlsx', bookSST:true, type: 'binary'});
    saveAs(new Blob([s2ab(fileExcelOutput)],{type:"application/octet-stream"}), 'file.xlsx');
</script>
</body>
</html>


Come il codice è molto semplice. 

Prima di tutto abbiamo bisogno di una tabella HTML con un id specificato.

Poi andiamo a creare di nuovo un file Excel ma questa volta lo facciamo usando la funzione table_to_book(). Questa funzione accetta due parametri: l’ID della tabella che vogliamo convertire in file Excel ed il nome del foglio che verrà creato all'interno del file.

Poi facendo uso di nuovo della stessa funzione per convertire il file nel giusto formato salviamo il file generato sul file system del client che ha visitato la pagina web. 

Ci siamo! Ora sapete come generare un file Excel e come convertire una tabella HTML in un file Excel usando JavaScript e la libreria SheetJS.

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)

Devnews

Devnews