HTML in PDF

Come usare lo strumento HTML in PDF

Funzioni principali dello strumento HTML in PDF

Informazioni sullo strumento HTML in PDF

Lo strumento HTML in PDF carica il tuo markup in un frame nascosto e in sandbox largo 794 pixel, lo renderizza con html2canvas, e taglia il canvas in pagine A4 che pdf-lib incorpora come immagini JPEG all'85 percento di qualità. Il codice incollato e i file caricati sono sempre verticali; la scheda URL aggiunge una scelta orizzontale. In modalità URL la pagina prova a recuperare l'indirizzo direttamente, poi tramite un proxy CORS pubblico, e segnala un errore se nessuno dei due restituisce HTML, invece di produrre un PDF vuoto.

Funziona bene per una fattura o un rapporto che hai scritto come HTML con stili inline, per un articolo salvato, o per una rapida copia stampabile di una pagina semplice. Poiché ogni pagina è un'immagine, il testo non è selezionabile e il file è più grande di un PDF testuale. Le pagine web recuperate vengono renderizzate senza i loro script, e fogli di stile o immagini che usano percorsi relativi non si caricano, quindi i siti simili ad app e le pagine dietro un login di solito non risultano uguali all'originale.

Quando usare lo strumento HTML in PDF

Uno strumento di marketing ti ha dato l'HTML di un'email o di una newsletter e qualcuno vuole una bozza come PDF. Incolla il markup nella scheda Incolla codice HTML; stili inline, colori e tabelle vengono renderizzati come apparirebbero in un browser largo 794 pixel, e le pagine risultano immagini di quella resa.

Uno script o un sistema ha prodotto un rapporto come file .html sul tuo disco, ad esempio un risultato di test o una stampa di laboratorio. Usa Carica file HTML. Le immagini richiamate con un percorso relativo come chart.png non verranno trovate, perché il file viene renderizzato all'interno di questa pagina e non dalla propria cartella; incorporale come URL data: oppure punta prima a indirizzi https completi.

Vuoi una copia offline di un articolo pubblico in un formato di pagina fisso. Inserisci l'indirizzo nella scheda URL della pagina web, scegli Verticale o Orizzontale e A4 o Letter, e converti. Leggi prima la nota sotto quella scheda: l'indirizzo potrebbe essere passato a un proxy pubblico, e le pagine che si costruiscono da sole con JavaScript o sono dietro un accesso di solito risultano incomplete.

Quando ti serve testo selezionabile anziché un'immagine, altri strumenti sono più adatti: testo semplice tramite Testo in PDF, un documento Word tramite Word in PDF. A un PDF creato qui puoi dare in seguito un livello di testo con OCR PDF, e PDF in HTML va nella direzione opposta.

Suggerimenti e risoluzione dei problemi

• Il messaggio «Impossibile recuperare» seguito dall'indirizzo significa che tutti e tre i tentativi sono falliti: un recupero diretto, poi allorigins.win, poi corsproxy.io, ciascuno con quattro secondi di tempo. I siti lenti falliscono solo per il timeout. Salva la pagina dal tuo browser come file HTML e usa invece la scheda Carica file HTML.
• Orientamento e Formato pagina esistono solo nella scheda URL della pagina web. Il codice incollato e i file caricati vengono sempre renderizzati su pagine A4 verticali.
• L'HTML viene impaginato in un frame largo 794 pixel, la larghezza di una pagina A4 a 96 dpi, e il body riceve un margine di 30 pixel a meno che il tuo HTML non ne imposti uno proprio, il che lascia 734 pixel per il contenuto. Un contenuto più largo, come una tabella a larghezza fissa, allarga l'immagine, e l'intero documento viene poi ridotto alla larghezza della pagina, quindi il suo testo esce più piccolo; dai ai contenitori una larghezza del 100 percento o inferiore.
• Le interruzioni di pagina cadono ad altezze fisse nell'immagine renderizzata, quindi una riga di testo o un'immagine può essere divisa tra due pagine. Le regole CSS page-break non vengono lette.
• Il file scaricato si chiama html_document.pdf per il codice incollato, il nome del tuo file con .pdf per un caricamento, e per un URL il nome host con i punti sostituiti da trattini bassi e tagliato a 25 caratteri, ad esempio en_wikipedia_org.pdf.
• Se un blocco annunci o un filtro di rete impedisce il caricamento di html2canvas da cdnjs.cloudflare.com, la conversione si interrompe con un messaggio che segnala che il motore di rendering della pagina non è stato caricato. Consenti quell'host, ricarica e converti di nuovo.
• Per andare nella direzione opposta, PDF in HTML trasforma il livello di testo di un PDF in un file HTML autonomo.

Come funziona lo strumento HTML in PDF nel tuo browser

Qualunque scheda tu usi, la stringa HTML viene caricata in un frame nascosto fissato fuori schermo, largo 794 pixel. Il frame è in sandbox senza il permesso di eseguire script, quindi nessuno script o gestore di eventi del markup viene eseguito, e gli stili e il tema scuro di questo sito non lo raggiungono. Dopo che il frame si è caricato (otto secondi al massimo, se un'immagine o un foglio di stile è lento) e una breve pausa per permettere ai font di stabilizzarsi, html2canvas 1.4.1 percorre quel DOM e lo dipinge su un canvas a 1,5 volte la scala. Il canvas viene tagliato in fette, ciascuna alta quanto una pagina A4 o Letter a quella larghezza; ogni fetta viene codificata come JPEG all'85 percento di qualità e incorporata da pdf-lib su una nuova pagina, scalata alla larghezza della pagina.

Nelle schede Incolla e Carica il markup non lascia mai la scheda: File.text() legge un file caricato nel browser e, a parte Google Analytics quando è attivo, le uniche richieste sono i due script delle librerie da cdnjs.cloudflare.com più qualsiasi immagine o foglio di stile esterno a cui il tuo HTML stesso fa riferimento. La scheda URL prova prima a recuperare l'indirizzo direttamente, poi tramite allorigins.win, poi tramite corsproxy.io, quattro secondi ciascuno, e usa la prima risposta più lunga di 100 caratteri. Quei servizi vedono l'indirizzo che hai digitato ma non il PDF finito, che viene assemblato in memoria e offerto come Blob.

Domande frequenti