Blog

Da tabella html a file excel in javascript

Semplice soluzione per esportare i dati da tabella HTML a file excel in javascript effettuando il download veloce.

In questi giorni mi è capitato di dover copiare più volte i dati da una tabella su una pagina html ad un file excel. Per evitare troppi passaggi ripetuti di copia e incolla dal browser ad OpenOffice ho pensato di cercare una soluzione alternativa. Ho cercato ed ho implementato con rapidi passaggi una soluzione semplice per esportare da tabella html a file excel direttamente dal browser con un solo click. Trovata  e implementata una soluzione per il mio caso specifico ho pensato di condividerla.
Sono riuscito ad ottenere una soluzione semplice scrivendo pochi righi di codice. Importando nel mio codice html due file javascript e richiamando una funzione all’onclick di un bottone il gioco è fatto.

 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.danielecarnovale.it/utili/js/tableExportExcel.js"></script>

<button class="buttt" onClick ="$('#tableexport').tableExport({type:'excel',escape:'false'});" style="">Esporta</button>

Come al solito cerchiamo di vedere gli script nel dettaglio.
Il primo è una libreria jquery di google, quindi se nel vostro file è già caricato, potete fare anche a meno di importarlo. (Forse è proprio meglio per evitare conflitti tra le librerie)
Il secondo che potete scaricare dal link è una funzione javascript che parserizza il codice html della tabella, leggendone tutto il contenuto e costruisce il file excel da scaricare.
La funzione onClick =”$(‘#tableexport’).tableExport({type:’excel’,escape:’false’});”
richiamata all’interno del bottone non fa altro che cercare, la tabella all’interno del file html, con id=”tableexport” e passarla al metodo tableExport presente nel secondo script caricato.

Ho utilizzato il seguente codice sia su Chrome, Internet Explorer 11, Safari e Firefox e non sembra dar particolari problemi.
Cercherò di trovare altre soluzioni e funzionalità utili per l’esportazione automatica di dati da pagine html ad altri formati che potrebbero essere interessanti.
In seguito trovate un esempio completo del codice illustrato sopra.

Esempio funzionante



Linguaggio Programma Valore
Html Chrome 100
JavaScript Browser 100
Excel Open Office 100

8 Comments

  1. Renato

    Davvero semplice e funzionale.
    Mi hai salvato da ore ed ore di creazione manuale vecchio stile.
    Grazie mille

    1. Daniele Carnovale

      Grazie.

  2. Gaia

    Grazie per il lavoro che hai fatto! Solo una domanda, nonostante nella mia tabella html i nomi delle colonne siano racchiusi tra i tag quando esporto la tabella in excel vengono visualizzati solamente i contenuti delle righe e non vengono invece esportati i nomi delle colonne di intestazione. Sapresti darmi un aiuto?
    grazie mille ancora!

    1. Daniele Carnovale

      Grazie per i complimenti.
      Per il problema che hai riscontrato dovresti controllare se nella pagina (e quelli della tabella) tutti i tag sono aperti e chiusi correttamente. Che la struttura e l’head della tabella è dello stesso formato

      Linguaggio Programma Valore

      Per altri problemi dovrei vedere il codice. Sono disponibile a visionarlo ed aiutarti.
      Saluti

  3. Lello

    Ciao Daniele e grazie per lo script davvero interessante.
    Al click sul pulsante sarebbe possibile allegare ed inviare via mail, ad un indirizzo predefinito, il file excel generato anziché scaricarlo?
    Grazie per la risposta

    1. Daniele Carnovale

      Ciao Lello,
      si che è possibile, basterebbe allegare il file ad un’email impostando i giusti parametri di invio del server smtp.
      Il codice si dovrebbe integrare con qualcosa del genere
      https://stackoverflow.com/questions/7381150/how-to-send-an-email-from-javascript
      oppure
      https://www.smtpjs.com/

  4. Moreno

    Esiste qualche impostazione particolare del browser per eseguire questo esempio? Ho provato con explorer 11 e mozilla ma non riesco a visualizzare nessun file di Excel. Grazie mille

    1. Daniele Carnovale

      No, non dipende dal browser, anche se Explorer 11 potrebbe essere troppo vecchio, può darsi che non riconosca bene jquery e ajax. Ti consiglio di utilizzare Chrome.

Leave a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.