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 |
21 comments
Renato
1 Agosto 2018 at 14:57
Davvero semplice e funzionale.
Mi hai salvato da ore ed ore di creazione manuale vecchio stile.
Grazie mille
Daniele Carnovale
2 Agosto 2018 at 11:48
Grazie.
Renato
1 Agosto 2018 at 14:57
Davvero semplice e funzionale.
Mi hai salvato da ore ed ore di creazione manuale vecchio stile.
Grazie mille
Daniele Carnovale
2 Agosto 2018 at 11:48
Grazie.
Gaia
18 Gennaio 2019 at 13:36
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!
Daniele Carnovale
18 Gennaio 2019 at 15:34
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
Per altri problemi dovrei vedere il codice. Sono disponibile a visionarlo ed aiutarti.
Saluti
Gaia
18 Gennaio 2019 at 13:36
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!
Daniele Carnovale
18 Gennaio 2019 at 15:34
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
Per altri problemi dovrei vedere il codice. Sono disponibile a visionarlo ed aiutarti.
Saluti
Lello
11 Febbraio 2019 at 10:53
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
Daniele Carnovale
11 Febbraio 2019 at 14:52
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/
Lello
11 Febbraio 2019 at 10:53
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
Daniele Carnovale
11 Febbraio 2019 at 14:52
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/
Moreno
4 Marzo 2019 at 10:11
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
Daniele Carnovale
4 Marzo 2019 at 10:45
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.
Moreno
4 Marzo 2019 at 10:11
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
Daniele Carnovale
4 Marzo 2019 at 10:45
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.
Daniele Carnovale
2 Gennaio 2021 at 19:27
basta ripetere lo script con un id della tabella diverso
Darin
20 Agosto 2021 at 19:06
Pretty portion of content. I simply stumbled upon your blog and in accession capital to say
that I acquire in fact loved account your weblog posts. Any way I’ll be subscribing
to your feeds or even I fulfillment you get
right of entry to persistently quickly.
Lorene
24 Agosto 2021 at 4:59
It’s nearly impossible to find well-informed people on this topic,
but you sound like you know what you’re talking about!
Thanks
Fabio
6 Maggio 2022 at 20:18
Ciao Daniele, grazie prima di tutto. Volevo farti una domanda: secondo te come posso verificare se all’interno della cella in HTML nella stringa è presente il simbolo € e solo in quel caso nell’export eliminare se presente il punto e negli altri casi sostituitlo con la virgola?
Grazie
Fabio
6 Maggio 2022 at 20:59
Ciao Daniele, grazie prima di tutto. Volevo farti una domanda: secondo te come posso verificare se all’interno della cella in HTML nella stringa è presente il simbolo € e solo in quel caso nell’export eliminare se presente il punto e negli altri casi sostituitlo con la virgola?
Grazie