Come convertire HTML in PDF: CSS di stampa, window.print() | We.Inc
Trasforma l'HTML in un PDF pulito: salva dalla finestra di stampa, scrivi CSS di stampa con @page e break-inside, chiama window.print() o esegui il rendering su un server. Con un generatore di CSS di stampa.
Il modo più rapido per trasformare una pagina web in PDF è la finestra di stampa del browser stesso: aprila, scegli la destinazione PDF e salva. Per controllare l'aspetto del PDF, aggiungi CSS di stampa con @media print e @page per formato della carta e margini. Per i PDF generati automaticamente, esegui il rendering della pagina con un browser headless come Puppeteer o Playwright.
Modi per creare un PDF da HTML
Metodo
Dove gira
Testo selezionabile
Ideale per
Finestra di stampa, salva come PDF
Qualsiasi browser desktop
Sì
Copie occasionali di una pagina
Pulsante window.print()
Il browser del visitatore
Sì
Fatture, ricevute, biglietti
Puppeteer page.pdf()
Node.js che pilota Chrome
Sì
Report automatici su un server
Playwright page.pdf()
Uno script Playwright che pilota un browser
Sì
PDF automatici dentro una configurazione di test esistente
Il browser del visitatore
No, la pagina diventa un'immagine
Download rapidi lato client
jsPDF
Il browser del visitatore
Sì, per il testo che disegni
Costruire un PDF da dati nel codice
Ogni metodo di questa pagina finisce per chiedere a un motore del browser di impaginare la pagina su carta, quindi un buon CSS di stampa li migliora tutti. Crea qui sotto un foglio di stile di stampa di partenza, poi scegli il metodo di conversione in base a chi preme il pulsante: una persona, la tua pagina o un server.
Scegli formato della carta, orientamento e margine per la regola @page.
Spunta gli extra che ti servono: nascondere la navigazione, tenere uniti i blocchi, stampare gli indirizzi dei link, mantenere i colori di sfondo.
Copia il CSS nel tuo foglio di stile; si applica solo in stampa.
Apri l'anteprima di stampa nel browser e scegli la destinazione PDF per controllare il risultato.
Usa l'anteprima di stampa come banco di prova. Si aggiorna a ogni modifica del CSS e non costa nulla.
In stampa nascondi navigazione, banner dei cookie e barre laterali; sulla carta nessuno può cliccarli.
Mantieni interi tabelle, figure e blocchi di codice con break-inside: avoid.
Per impostazione predefinita i browser eliminano i colori di sfondo in stampa. print-color-adjust: exact chiede di mantenere i tuoi, ma le impostazioni di stampa del visitatore hanno comunque la precedenza.
Usa pt, mm o in per le dimensioni di stampa quando ti servono misure fisiche esatte.
Domande frequenti
Come salvo una pagina web come PDF senza strumenti?
Apri la finestra di stampa del browser dal menu o con la scorciatoia da tastiera, poi scegli l'opzione PDF nell'elenco delle destinazioni o delle stampanti. Il nome esatto dipende dal browser e dal sistema operativo.
Come aggiungo un pulsante Scarica PDF alla mia pagina?
La versione più semplice e onesta è un pulsante che chiama window.print(), che apre la stessa finestra, dove il visitatore può salvare come PDF. Non richiede librerie, mantiene il testo selezionabile e usa il tuo CSS di stampa.
Come evito che una tabella si divida su due pagine?
Aggiungi break-inside: avoid alla tabella, o alle sue righe se la tabella è lunga. Il vecchio page-break-inside: avoid è trattato come alias, quindi funziona ancora nei fogli di stile più vecchi.
Posso impostare il formato della carta dal CSS?
Sì. @page { size: A4 portrait; margin: 15mm; } imposta dimensione e margini del riquadro della pagina. Puppeteer lo usa solo quando preferCSSPageSize è true; altrimenti decide la sua opzione format, Letter per impostazione predefinita.
Perché html2pdf.js produce PDF sfocati o enormi?
Il suo README spiega che esegue il rendering del contenuto in un'immagine e inserisce quell'immagine nel PDF, quindi il testo non è selezionabile né ricercabile e i file diventano grandi. Usa la stampa o un browser headless quando il testo conta.
Il CSS di stampa è la base
Un blocco @media print ti permette di ridisegnare la pagina per la carta senza toccare il design a schermo. Nascondi ciò che sulla carta non ha senso, allarga la colonna dei contenuti e imposta una dimensione del carattere leggibile.
La regola @page controlla il riquadro della pagina stesso: dimensione, margini e orientamento, con :first, :left e :right per trattare pagine specifiche in modo diverso. MDN indica @page come Baseline newly available da dicembre 2024, con alcune parti che variano ancora tra i browser.
Quando eseguire il rendering su un server
Se i PDF devono essere prodotti senza una persona, come un report notturno o una fattura inviata via email, usa un browser headless. page.pdf() di Puppeteer stampa con il media type print, accetta opzioni come format, margin e printBackground e può salvare direttamente in un percorso di file.
Il rendering lato server dà lo stesso risultato ogni volta perché controlli tu la versione del browser e i font. Significa però anche gestire e proteggere quel browser, quindi affrontalo solo quando un pulsante di stampa non basta.
Riferimento del CSS di stampa
Regole e proprietà che danno forma alle pagine stampate
CSS
Valori
Uso
@media print { }
Qualsiasi regola
Stili che si applicano solo in stampa o nel salvataggio in PDF
@page { size }
A5, A4, A3, B5, B4, letter, legal, ledger o lunghezze; portrait o landscape
Formato della carta e orientamento
@page { margin }
Lunghezze
Margini di ogni pagina
@page :first
Pseudo-classe
Margini diversi sulla prima pagina
auto, avoid, avoid-page, avoid-column
Tenere un blocco su una sola pagina
break-before / break-after
auto, avoid, page, left, right
Forzare o impedire un'interruzione su un blocco
economy, exact
Se il browser può eliminare colori e sfondi
Esempi di stampa da copiare
Un pulsante stampa o salva come PDF
window.print() apre la finestra di stampa e blocca la pagina finché non si chiude. La classe tiene il pulsante stesso fuori dalla carta.
Layout di fattura che inizia ogni fattura su una nuova pagina
break-after: page dopo ogni fattura dà una fattura per foglio quando ne stampi diverse insieme.
Preparare la pagina subito prima della stampa
beforeprint e afterprint scattano attorno alla finestra di stampa, utile per espandere le sezioni compresse.
PDF lato server con Puppeteer
preferCSSPageSize fa prevalere la tua dimensione @page sull'opzione format; printBackground mantiene gli sfondi.