CONTATTACI

Blog

schermo con all interno diverse tabelle aperte

Come convertire tabelle html in pdf

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.

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

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.