Come convertire un file HTML in PDF mantenendo lo stile
Dal team di FreePDF ·
Un file .html è una cosa fragile da passare a qualcuno. Sul computer che l'ha prodotto si vede bene, poi arriva senza il suo foglio di stile, oppure si apre in un browser che lo impagina diversamente, oppure viene bloccato come allegato. Convertirlo in PDF blocca la pagina: un solo file, la stessa impaginazione ovunque, e in stampa esce come si vede.
Cosa passa e cosa no
Carica il file .html o .htm: viene reso in PDF nello stesso modo in cui un browser lo renderebbe per la stampa. Tre cose vale la pena saperle prima di convertire:
- Il CSS contenuto nel file viene applicato. Tutto quello che sta in un blocco
<style>o in un attributostyle=passa: caratteri, colori, bordi, tabelle, sfondi. - JavaScript non viene eseguito. La pagina è resa così come sta nel file. Se un grafico o una tabella li disegna uno script al caricamento, nel PDF finisce il contenitore vuoto da cui era partito.
- I percorsi relativi non si risolvono. Un file caricato non ha un indirizzo rispetto al quale essere relativo, quindi
<img src="images/logo.png">o<link href="style.css">non puntano a niente. Gli URL assoluti conhttps://vengono scaricati normalmente.
La soluzione per l'ultimo punto è una pagina autosufficiente: incolla il CSS in un blocco <style> e per le immagini usa URL completi oppure incorporale come URI data:. La maggior parte degli strumenti che generano report in HTML — e il «Salva pagina con nome → file singolo» del browser — lo fa già così.
Formato e margini si governano dal CSS
Dato che il rendering avviene come output di stampa, il CSS di stampa viene rispettato. Se l'HTML lo generi tu, poche regole bastano:
@page { size: A4; margin: 20mm; }imposta formato carta e margini. UsaLetterinvece diA4se è il tuo formato.break-before: pagesu un titolo fa iniziare ogni sezione su un foglio nuovo.break-inside: avoidsu una tabella o un riquadro evita che venga tagliato su due pagine.- Le regole dentro
@media printvalgono, così navigazione, banner e tutto ciò che nasconderesti a una stampante restano fuori dal PDF.
Quando è meglio la finestra di stampa del browser
Va detto chiaramente, perché spesso è la risposta giusta: se quello che vuoi è salvare in PDF una pagina web viva, aprila e stampala in PDF. Il browser ha già la pagina caricata con le immagini, con gli script eseguiti e con il tuo accesso fatto, quindi cattura cose che un file caricato semplicemente non contiene.
Convertire il file qui è la strada migliore quando hai sul disco un .html autosufficiente — una fattura arrivata per email, un report scritto da uno script, l'esportazione di qualche strumento, una ricevuta salvata — e vuoi un PDF pulito, senza le intestazioni, i piè di pagina e i numeri che il browser stampa sui bordi. È anche ripetibile: lo stesso file dà lo stesso PDF ogni volta e su qualsiasi macchina, cosa che una finestra di stampa piena di impostazioni diverse per ogni computer non fa.
E se il documento è da scrivere anziché da convertire, Markdown salta il problema in blocco: nessun CSS da gestire e nessuna immagine da rincorrere.
Domande frequenti
Posso dargli un URL invece di un file?
No: converte un file che carichi tu. Salva prima la pagina (Ctrl+S / Cmd+S, scegliendo l'opzione file singolo se il browser la offre) e carica quella. Se la pagina sta dietro un accesso, salvarla da te è comunque l'unico modo per farne uscire il contenuto.
Il PDF è uscito senza stile. Cosa è successo?
Quasi sempre è un foglio di stile che vive in un file a parte. L'HTML richiama style.css, quello che hai caricato era solo l'HTML, e non c'è niente da caricare. Apri il file in un editor di testo, sposta il CSS in un blocco <style> dentro il <head> e riconverti.