Il linguaggio di markup HTML è un elemento fondamentale per lo sviluppo web. Quest’ultimo ricopre un ruolo cruciale nella gestione degli elementi all’interno di una pagina, ma anche nella modellazione degli stessi.
Il linguaggio HTML fornisce una struttura e una sintassi standardizzate per creare pagine web, consentendo ai progettisti e agli sviluppatori di definire la struttura, il contenuto e il layout di un sito web in modo organizzato e semantico. Tra gli elementi più utilizzati e versatili all’interno di un documento HTML troviamo sicuramente le tabelle html.
Le tabelle HTML: strumento versatile per la visualizzazione dei dati
Le tabelle html consentono di organizzare e visualizzare dati in modo, appunto, tabellare, rendendo più chiara e comprensibile la presentazione delle informazioni. Una tabella in html può essere utilizzata per una vasta gamma di scopi, dal mostrare dati finanziari complessi a creare calendari o programmi, fornendo una struttura visiva che facilita la comprensione e l’analisi dei dati.
Sei indeciso sul percorso? 💭
Parliamone! Scrivici su Whatsapp e risponderemo a tutte le tue domande per capire quale dei nostri corsi è il più adatto alle tue esigenze.
La necessità di convertire le tabelle HTML in PDF
Ci sono situazioni in cui potresti voler convertire queste tabelle in un formato diverso, ad esempio in PDF, per scopi di condivisione, archiviazione o semplicemente stampa.
Non a caso, le applicazioni web che contengono tabelle html, grafici e diagrammi spesso includono un’opzione per esportare i dati in formato PDF. Ma come si fa ad ottenere un output PDF dall’aspetto professionale? La maggior parte degli esportatori PDF gratuiti online si limita a convertire il contenuto di una pagina HTML in un PDF senza eseguire alcuna formattazione aggiuntiva, il che può rendere i dati difficili da leggere. Sarebbe comodo aggiungere intestazioni, indici, titoli alle tabelle ed una formattazione più curata dei dati, non trovi?
Vediamo insieme quali strumenti lo consentono.
Gli strumenti per ottenere un output PDF professionale partendo da una tabella in html
Convertire tabelle html in pdf usando gli strumenti integrati nel browser
In primis, consideriamo la possibilità di esportare il PDF utilizzando gli strumenti integrati del browser. Quando si visualizza una pagina web, è possibile stamparla facilmente facendo clic con il tasto destro del mouse su un punto qualsiasi e scegliendo l’opzione Stampa dal menu. In questo modo si apre una finestra di dialogo che consente di scegliere le impostazioni di stampa. Ma non è necessario stampare il documento. La finestra di dialogo offre anche la possibilità di salvare il documento in formato PDF, cosa che faremo. In linguaggio JavaScript, l’oggetto window dispone di un metodo di stampa, per cui possiamo scrivere una semplice funzione JavaScript e collegarla a uno dei nostri pulsanti come questo:
function downloadPDFWithBrowserPrint() {
window.print();
}
document.querySelector('#browserPrint').addEventListener('click', downloadPDFWithBrowserPrint);
Il corrispettivo html da esportare, in questo caso, sarebbe
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Download PDF with Browser Print</title>
</head>
<body>
<!-- Contenuto della pagina -->
<button id="browserPrint">Download PDF</button>
<!-- Inclusione dello script JavaScript -->
<script>
function downloadPDFWithBrowserPrint() {
window.print();
}
document.querySelector('#browserPrint').addEventListener('click', downloadPDFWithBrowserPrint);
</script>
</body>
</html>
Il risultato ottenuto è leggibile e molto chiaro. Anche se non è personalizzato, gli aspetti principali delle tabelle sono stati mantenuti intatti. Inoltre, ognuna delle pagine include le intestazioni delle colonne della tabella e il piè di pagina, che il browser ha intelligentemente rilevato grazie alla mia scelta di utilizzare l’HTML semantico per costruire una tabella correttamente strutturata.
Tuttavia, vengono inclusi i metadati extra della pagina che il browser include nel PDF. Nella parte superiore, vediamo la data e il titolo della pagina HTML. In fondo alla pagina c’è il sito web da cui è stato stampato il documento e il numero di pagina. Se vogliamo un output contenente i dati principali della tabella, con il solo scopo di vedere i dati, Chrome fa un buon lavoro.
Un’altra cosa da notare è che la funzionalità di stampa nativa del browser è diversa da browser a browser. Avremo, quindi, delle differenze, minime, a seconda del browser che utilizziamo o con cui ci interfacciamo. Differenze che possono migliorare o peggiorare l’output.
Convertire tabelle html in pdf usando strumenti esterni al browser
Le tabelle HTML possono essere esportate attraverso altri tool esterni al browser di riferimento: vediamone alcuni!
La libreria jsPDF
Consideriamo una libreria open-source chiamata jsPDF. Questa libreria esiste da almeno cinque anni e ogni settimana viene scaricata oltre 200.000 volte. Si tratta di una libreria molto gettonata per gestire una tabella in HTML.
jsPDF è anche abbastanza facile da usare. Si crea una nuova istanza della classe jsPDF, le si dà un riferimento al contenuto HTML (considerando l’esistenza del tag tabella html, ovvero <TABLE>) che si vuole esportare e si forniscono altre impostazioni, come la dimensione dei bordi della tabella HTML o il titolo del documento.
function downloadPDFWithjsPDF() {
let doc = new jspdf.jsPDF('p', 'pt', 'a4');
doc.html(document.querySelector('#styledTable'), {
callback: function (doc) {
doc.save('MLB World Series Winners.pdf');
},
margin: [60, 60, 60, 60],
x: 32,
y: 32,
});
}
document.querySelector('#jsPDF').addEventListener('click', downloadPDFWithjsPDF);
L’ HTML, in questo caso, sarebbe:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Download PDF with jsPDF</title>
<!-- Includi il file jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
</head>
<body>
<!-- Contenuto della pagina -->
<table id="styledTable">
<!-- Inserisci qui il tuo contenuto tabellare -->
<tr>
<td>Contenuto</td>
<td>Contenuto</td>
<!-- Aggiungi più colonne o righe secondo necessità -->
</tr>
</table>
<button id="jsPDF">Download PDF</button>
<!-- Inclusione dello script JavaScript -->
<script>
function downloadPDFWithjsPDF() {
let doc = new jspdf.jsPDF('p', 'pt', 'a4');
doc.html(document.querySelector('#styledTable'), {
callback: function (doc) {
doc.save('MLB World Series Winners.pdf');
},
margin: [60, 60, 60, 60],
x: 32,
y: 32,
});
}
document.querySelector('#jsPDF').addEventListener('click', downloadPDFWithjsPDF);
</script>
</body>
</html>
All’interno dei suoi processi, jsPDF utilizza una libreria chiamata html2canvas. Come suggerisce il nome, html2canvas prende il contenuto HTML e lo trasforma in un’immagine memorizzata su un elemento HTML <canvas>. jsPDF prende quindi il contenuto del canvas e lo salva.
Il PDF ottenuto include delle belle intestazioni e lo sfondo a righe delle tabelle, molto comprensibile. Non contiene nessuno dei metadati di pagina extra inclusi nel metodo di stampa del browser.
Sebbene jsPDF sia una libreria potente, sembra che questo strumento possa funzionare meglio quando il contenuto esportato può stare su una sola pagina. Su tabelle molto grandi in termini di lunghezza, l’output non è del tutto comprensibile o professionale, in quanto è possibile che il contenuto venga tagliato tra una pagina e l’altro, oppure, l’assenza di margine non ci permette di ottenere nel PDF il contenuto del testo integro (leggibile).
La libreria Pdfmake
La libreria pdfmake è sicuramente la scelta migliore per gestire le tabelle HTML. C’è da dire che la configurazione di pdfmake è molto più complessa di quella di jsPDF. Il motivo è che pdfmake costruisce il documento PDF da zero utilizzando i dati forniti dall’utente, anziché convertire in PDF il contenuto HTML esistente nella pagina. Ciò significa che invece di fornire a pdfmake un riferimento alla mia tabella in HTML, bisogna fornirgli i dati per l’intestazione, il piè di pagina, il contenuto e il layout della mia tabella PDF.
Il risultato che si ottiene è sicuramente superiore ai documenti PDF visti in precedenza. Possiamo includere gli stili per la nostra tabella, in modo da riprodurre le intestazioni delle colonne e gli sfondi a righe. Inoltre, le intestazioni di colonna della tabella si ripetono per rendere più facile tenere traccia dei dati visualizzati in ciascuna colonna in ogni pagina.
pdfmake permette di includere un’intestazione e un piè di pagina, così da poter aggiungere i numeri di pagina.
Nel complesso, sembra che il punto di forza di pdfmake sia la costruzione di PDF da zero. Se, ad esempio, si volesse generare una fattura basata sui dati di un ordine e non si volesse mostrare la fattura sullo schermo della propria applicazione web, allora pdfmake sarebbe un’ottima scelta. Ecco il codice di riferimento:
function downloadPDFWithPDFMake() {
let tableHeaderText = [...document.querySelectorAll('#styledTable thead tr th')].map(thElement => ({ text: thElement.textContent, style: 'tableHeader' }));
let tableRowCells = [...document.querySelectorAll('#styledTable tbody tr td')].map(tdElement => ({ text: tdElement.textContent, style: 'tableData' }));
let tableDataAsRows = tableRowCells.reduce((rows, cellData, index) => {
if (index % 4 === 0) {
rows.push([]);
}
rows[rows.length - 1].push(cellData);
return rows;
}, []);
let docDefinition = {
header: { text: 'MLB World Series Winners', alignment: 'center' },
footer: function(currentPage, pageCount) { return ({ text: `Page ${currentPage} of ${pageCount}`, alignment: 'center' }); },
content: [
{
style: 'tableExample',
table: {
headerRows: 1,
body: [
tableHeaderText,
...tableDataAsRows,
]
},
layout: {
fillColor: function(rowIndex) {
if (rowIndex === 0) {
return '#0f4871';
}
return (rowIndex % 2 === 0) ? '#f2f2f2' : null;
}
},
},
],
styles: {
tableExample: {
margin: [0, 20, 0, 80],
},
tableHeader: {
margin: 12,
color: 'white',
},
tableData: {
margin: 12,
},
},
};
pdfMake.createPdf(docDefinition).download('MLB World Series Winners');
}
document.querySelector('#pdfmake').addEventListener('click', downloadPDFWithPDFMake);
E il rispettivo codice HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Download PDF with PDFMake</title>
<!-- Includi il file PDFMake -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script>
</head>
<body>
<!-- Contenuto della pagina -->
<table id="styledTable">
<!-- Inserisci qui il tuo contenuto tabellare -->
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<!-- Aggiungi più colonne secondo necessità -->
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<!-- Aggiungi più colonne secondo necessità -->
</tr>
<!-- Aggiungi più righe secondo necessità -->
</tbody>
</table>
<button id="pdfmake">Download PDF</button>
<!-- Inclusione dello script JavaScript -->
<script>
function downloadPDFWithPDFMake() {
let tableHeaderText = [...document.querySelectorAll('#styledTable thead tr th')].map(thElement => ({ text: thElement.textContent, style: 'tableHeader' }));
let tableRowCells = [...document.querySelectorAll('#styledTable tbody tr td')].map(tdElement => ({ text: tdElement.textContent, style: 'tableData' }));
let tableDataAsRows = tableRowCells.reduce((rows, cellData, index) => {
if (index % 4 === 0) {
rows.push([]);
}
rows[rows.length - 1].push(cellData);
return rows;
}, []);
let docDefinition = {
header: { text: 'MLB World Series Winners', alignment: 'center' },
footer: function(currentPage, pageCount) { return ({ text: `Page ${currentPage} of ${pageCount}`, alignment: 'center' }); },
content: [
{
style: 'tableExample',
table: {
headerRows: 1,
body: [
tableHeaderText,
...tableDataAsRows,
]
},
layout: {
fillColor: function(rowIndex) {
if (rowIndex === 0) {
return '#0f4871';
}
return (rowIndex % 2 === 0) ? '#f2f2f2' : null;
}
},
},
],
styles: {
tableExample: {
margin: [0, 20, 0, 80],
},
tableHeader: {
margin: 12,
color: 'white',
},
tableData: {
margin: 12,
},
},
};
pdfMake.createPdf(docDefinition).download('MLB World Series Winners');
}
document.querySelector('#pdfmake').addEventListener('click', downloadPDFWithPDFMake);
</script>
</body>
</html>
In conclusione possiamo affermare che pdfmake offre un risultato più professionale sotto tutti gli aspetti, dando anche molte possibilità di personalizzazione. Questo però richiede del tempo da investire per interagire e settare questa libreria. Non è immediata come l’interazione con il browser, ma ottimizza la resa del nostro documento PDF contenente la tabella HTML.
Se vuoi approfondire aspetti legati all’html, non perdere la nostra guida html e css in italiano!
