Convertitore gratuito da HTML a PDF

Informazioni sulla conversione HTML → PDF

Il PDF è nato come il progetto "Camelot" di John Warnock in Adobe nel 1991, una proposta interna per creare un "formato di file comune che potesse catturare documenti da qualsiasi applicazione, inviare versioni elettroniche di questi documenti ovunque e visualizzarli e stamparli su qualsiasi macchina". Warnock era cofondatore di Adobe e inventore (con Charles Geschke) di PostScript; l'obiettivo di Camelot era prendere le garanzie di fedeltà di stampa di PostScript e farle funzionare anche su schermo oltre che su carta. Acrobat 1.0 e PDF 1.0 sono stati lanciati nel giugno 1993, con il primo reader Acrobat commerciale a 50 dollari. Il PDF è stato un formato proprietario controllato da Adobe per quindici anni; Adobe ha rilasciato la specifica all'ISO nel 2008 come ISO 32000-1:2008 (PDF 1.7 pubblicato come standard aperto); il principale PDF 2.0 (ISO 32000-2) è arrivato nel 2017 con revisioni fino al 2020. Adobe ha rinunciato ai suoi restanti diritti di brevetto nell'aprile 2023, rendendo il PDF completamente libero da brevetti in tutto il mondo. Il PDF è ora il formato di documento portatile universale, ogni sistema operativo lo legge nativamente, ogni stampante lo capisce, ogni sistema legale lo accetta. L'intera struttura poggia sul layout a posizione fissa in stile PostScript: ogni elemento su una pagina PDF ha una posizione (x, y) assoluta, allineata alla baseline rispetto al sistema di coordinate della pagina, con il testo codificato come font + riferimenti glyph e la grafica come comandi path.

Il disallineamento di base tra HTML e PDF è ciò che rende la conversione HTML-a-PDF più difficile di quanto sembri. L'HTML è basato sul reflow, il contenuto si adatta al viewport, i paragrafi si riavvolgono al ridimensionamento, il layout cambia quando l'utente zooma. Il PDF è a layout fisso, ogni elemento è posizionato assolutamente, i confini delle pagine sono espliciti, nessun reflow mai avviene. Convertire dall'uno all'altro forza una serie di decisioni difficili: come dividere pagine lunghe, dove vivono i font incorporati nel PDF risultante, come viene preservata la grafica vettoriale, se i link rimangono cliccabili. Non c'è una risposta oggettivamente corretta per la maggior parte di queste, il comportamento giusto dipende dal caso d'uso.

Due approcci JavaScript: raster vs vettoriale

La conversione HTML-a-PDF basata su browser ha due architetture. html2pdf.js (Erik Koopmans, usato da questo strumento) avvolge due librerie sottostanti, html2canvas (che renderizza un elemento HTML in un'immagine canvas leggendo il layout dal DOM e ridisegnandolo) e jsPDF (che costruisce un PDF da primitive). La pipeline: HTML, immagine canvas, immagine incorporata nel PDF. Il risultato è preciso al pixel, quello che vedi nell'anteprima è quello che ottieni nel PDF, ma solo raster: il testo nel PDF è un'immagine, non testo selezionabile. Non puoi cercare parole all'interno del PDF, non puoi copiare-incollare da esso, gli screen reader non possono leggerlo. Per report, certificati, fatture e documenti una tantum questo è accettabile; per documenti in cui il testo deve essere ricercabile o accessibile, questa è una limitazione significativa. L'architettura alternativa usa jsPDF direttamente con primitive di rendering del testo (doc.text(), doc.line(), doc.image()), costruendo il PDF da zero con testo selezionabile e grafica vettoriale. Questo richiede di scrivere codice convertitore per ogni elemento HTML che vuoi supportare, ma produce un "vero" PDF che è ricercabile e accessibile. Il compromesso: html2pdf.js è una riga di codice; l'approccio jsPDF-diretto è un progetto di ingegneria sostanziale. Questo strumento dà priorità alla facilità d'uso (html2pdf.js) rispetto alla selezionabilità del testo, sii consapevole del compromesso quando decidi se l'output soddisfa le tue esigenze.

Alternative lato server, quando il lato browser non basta

wkhtmltopdf è stato per lungo tempo lo strumento open-source da riga di comando HTML-a-PDF, un renderer basato su WebKit che convertiva HTML in PDF sul server. Usato in innumerevoli pipeline CI, applicazioni enterprise e servizi di generazione PDF. Il progetto wkhtmltopdf è stato archiviato nel 2023 (il repository GitHub è ora di sola lettura); non dovrebbe essere la raccomandazione per nuove applicazioni, anche se miliardi di PDF esistenti sono stati generati con esso. Puppeteer (Google, headless Chrome dal 2017) è lo standard industriale moderno per HTML-a-PDF lato server. La page.pdf() di Puppeteer usa la pipeline completa di generazione PDF di Chromium, testo selezionabile, font incorporati, grafica vettoriale, collegamenti ipertestuali, tutto funziona correttamente perché Chromium ha un vero backend PDF. Playwright (Microsoft, 2020) è l'equivalente cross-browser (Chromium, Firefox, WebKit) con la stessa capacità di generazione PDF. Prince (commerciale, 495 dollari/server) è la migliore implementazione della categoria di CSS Paged Media, supporta layout multi-colonna, header/footer correnti, pagine nominate, note a piè di pagina, funzioni OpenType. WeasyPrint (open source, Python) è l'alternativa cross-platform con funzionalità simili. Paged.js è un polyfill che porta le funzionalità di CSS Paged Media alla generazione PDF basata su browser. Il "Salva come PDF" integrato del browser (File, Stampa, Salva come PDF) è l'opzione più economica di tutte, è gratuito, già installato, supporta CSS Paged Media ragionevolmente bene e produce output PDF con testo selezionabile. Per conversioni una tantum, questa è spesso la risposta giusta piuttosto che uno strumento di terze parti.

CSS Paged Media, come funziona la vera stampa-da-CSS

Il CSS Paged Media Module del W3C definisce un insieme di funzionalità CSS specifiche per output paginato: regole @page per controllare dimensione della pagina, margini e orientamento; @page :left / @page :right per margini asimmetrici sulle pagine sinistra e destra di un libro; @page :first per la gestione speciale della prima pagina; margin boxes (@top-center, @bottom-right, ecc.) per header e footer correnti; page-break-before / page-break-after / page-break-inside per controllare dove le pagine si interrompono (con la sintassi moderna break-before: page / break-after: page / break-inside: avoid); orphans e widows per il controllo dell'interruzione dei paragrafi. I browser implementano sottoinsiemi variabili di CSS Paged Media nella loro pipeline di stampa. Prince e WeasyPrint implementano la specifica completa; page.pdf() di Chrome copre la maggior parte; html2pdf.js (questo strumento) supporta le regole base page-break-* ma salta le funzionalità più elaborate di margin-box e named-page. Per documenti che necessitano di layout di qualità libro (pagine del titolo, inizi di capitolo, header correnti, note a piè di pagina), usa Prince o WeasyPrint; per il caso tipico "salva questo report come PDF", html2pdf.js è sufficiente.

Casi d'uso comuni:

• Fatture e ricevute. Il caso aziendale più comune, un template HTML strutturato popolato con dati di ordine, esportato come PDF per invio via email o archiviazione. La limitazione del testo-non-selezionabile raramente importa perché il destinatario non ha bisogno di cercare nel contenuto di una singola fattura.
• Report e documenti. Report aziendali trimestrali, deliverable di progetto, documenti di stato interni, generati da un sistema di templating, esportati come PDF per la distribuzione.
• Certificati. Certificati di completamento corso, certificati di partecipazione a conferenze, distintivi di realizzazione, tipicamente una singola pagina con stile HTML/CSS, esportata come PDF una tantum.
• Curriculum e CV. Candidati che costruiscono il loro curriculum in un template web (Notion-export, builder personalizzato) ed esportano come PDF per la sottomissione. La selezionabilità del testo conta qui perché il software di assunzione (ATS) spesso esegue l'estrazione di parole chiave dai PDF del curriculum.
• Biglietti e conferme. Biglietti per concerti, carte d'imbarco per voli, conferme di hotel, esportati da flussi di prenotazione web per archiviazione offline o stampa.
• Archiviazione di contenuti web. Salvare un articolo, post di blog o pagina di documentazione come PDF a formato fisso per riferimento offline o archiviazione a lungo termine.
• Email-a-PDF. Conversione di email HTML (newsletter, annunci) in PDF per inoltro o archivi di conformità.

Ambito onesto: cosa fa e cosa non fa questo strumento

Questo strumento usa html2pdf.js v0.10.1 (la build inclusa con html2canvas + jsPDF) per renderizzare l'HTML nel tuo browser e produrre un download PDF. Il PDF risultante è preciso al pixel rispetto all'anteprima, quello che vedi è quello che ottieni, ma il testo è renderizzato come immagine raster, non testo selezionabile. Supporta dimensioni di pagina A4, Letter, A3 e A5, orientamenti verticale e orizzontale, margini configurabili, nome file personalizzato e regole CSS base page-break-* per il controllo dell'interruzione di pagina. Cosa questo strumento non fa, e dove dovresti raggiungere un'alternativa: testo selezionabile / ricercabile nel PDF (usa Puppeteer lato server, o "Salva come PDF" del browser); layout di qualità libro con header correnti, footer, pagine nominate, note a piè di pagina (usa Prince o WeasyPrint lato server); esecuzione JavaScript nell'HTML renderizzato (il convertitore esegue l'HTML attraverso html2canvas che non esegue script all'interno del contenuto renderizzato); contenuto animato (il PDF è statico); media query che dipendono dai contesti di stampa (il rendering avviene nel contesto schermo). Per le esigenze quotidiane "crea un PDF da questo HTML", html2pdf.js è abbastanza buono; per pipeline di livello produzione che necessitano di testo PDF reale e output accessibile, Puppeteer lato server è lo standard moderno.

Privacy: perché il solo-browser conta qui

La generazione PDF è un'attività SaaS cloud comune, servizi come DocRaptor, PDFShift, PDFCrowd, API2PDF fanno pagare per PDF generato, di solito perché stanno eseguendo Puppeteer headless su una server farm e assorbendo il costo del rendering accelerato GPU. Il compromesso è che l'HTML che sottoponi a quei servizi viene elaborato sulla loro infrastruttura: le fatture contengono informazioni cliente, i report contengono dati aziendali, i certificati contengono nomi personali, i curriculum contengono tutto. Qualsiasi cosa generi, il servizio di terze parti la vede. Questo strumento gira interamente nel tuo browser tramite html2pdf.js, verifica nel tab Network di DevTools mentre clicchi Genera (l'unica richiesta in uscita è il caricamento della libreria html2pdf.js dal CDN; una volta caricato, nessuna ulteriore richiesta). Porta la pagina offline (modalità aereo) dopo che la libreria si carica e il convertitore funziona ancora. Sicuro per HTML contenente nomi cliente, dati finanziari, template interni o qualsiasi contenuto che non vorresti copiato sull'hard drive di uno sconosciuto.

Domande frequenti

Quali funzionalità HTML/CSS sono supportate?

html2pdf supporta HTML e CSS standard, inclusi layout, caratteri, colori, immagini e tabelle. Le funzionalità avanzate (animazioni, JavaScript, media query) sono limitate. Per i migliori risultati, usa CSS inline o tag <style> invece di fogli esterni.

Come includere immagini nel mio HTML?

Usa URI di dati per le immagini o assicurati che gli URL di immagini esterne siano accessibili e compatibili CORS. Le immagini codificate in Base64 funzionano in modo affidabile. Esempio: <img src="data:image/png;base64,…" />

Perché il testo non è selezionabile nel PDF?

Perché html2pdf.js renderizza prima l'HTML in un'immagine canvas, poi incorpora l'immagine nel PDF. Il "testo" del PDF è in realtà un'immagine raster di testo, non glifi di testo reali. Questo è il compromesso per la fedeltà visiva: il PDF appare esattamente come l'anteprima del browser, ma non puoi cercare, copiare o usare uno screen reader su di esso. Per testo PDF realmente selezionabile, le alternative sono: usa il "Salva come PDF" integrato del browser (File, Stampa, Salva come PDF, produce testo selezionabile ed è gratuito); usa uno strumento lato server come page.pdf() di Puppeteer che ha la pipeline completa di generazione PDF di Chromium; o scrivi JavaScript che chiama direttamente le primitive doc.text() di jsPDF (sostanzialmente più lavoro).

Perché la mia anteprima differisce dal PDF?

L'anteprima mostra il rendering del tuo HTML nel browser. Alcune funzionalità CSS si visualizzano in modo diverso in PDF. Testa i layout complessi prima di generare il PDF finale, e regola margini o dimensioni del carattere se necessario.

Posso aggiungere interruzioni di pagina nel mio HTML?

Sì, usa le interruzioni di pagina CSS: aggiungi page-break-before: always; o page-break-after: always; a qualsiasi elemento. In CSS3, usa break-before: page; o break-after: page; per una migliore compatibilità.

Il mio HTML viene caricato su un server?

No. L'HTML che incolli e il PDF generato rimangono entrambi nel tuo browser. L'unica richiesta di rete è per la libreria html2pdf.js stessa caricata da un CDN pubblico al momento del caricamento della pagina; una volta caricato, nessuna ulteriore richiesta in uscita. Verifica nel tab Network di DevTools mentre clicchi Genera, o porta la pagina offline (modalità aereo) dopo che la libreria si carica e il convertitore funziona ancora. Sicuro per HTML contenente dati cliente, dettagli finanziari, template aziendali interni o qualsiasi contenuto che non vorresti vedesse un servizio PDF di terze parti.