Ingen opplasting, 100% lokalt, ingen konto

HTML til PDF

Lim inn HTML, velg en sidestørrelse og last ned en PDF, alt gjengis i nettleseren.

Slik fungerer HTML til PDF

HTML til PDF tar HTML-kode du limer inn i editoren, renser den med DOMPurify for å fjerne skript og usikre attributter, gjengir den på et utenfor-skjermen-lerret ved hjelp av html2canvas, og koder resultatet inn i en PDF med jsPDF. Hele pipelinen kjører inne i nettleserfanen din; ingen HTML-kode eller gjengitt utdata overføres til noen server. Dette gjør den egnet for konvertering av HTML-utdrag som inneholder personlige data du ikke ville limt inn i en nettjeneste.

Forstå utdataformatet før du er avhengig av det. PDF-sidene er rasterbilder, ikke vektortekst. Tekst i utdataene er ikke valgbar, ikke søkbar og kan ikke flytes om. Eksterne ressurser som bilder referert av URL blokkeres av nettleserens CORS-policy og vil ikke lastes. Innebygde stiler og CSS fungerer, men komplekse oppsett med egendefinerte web-skrifter eller avansert CSS-rutenett kan hende ikke gjengis nøyaktig. For dokumenttro konvertering av fullstendige nettsider er en hodeløs nettleser som kjører på serversiden det mer hensiktsmessige verktøyet.

Skrevet av Bastien Sulyan

Slik bruker du HTML til PDF, steg for steg

  1. Lim HTML-koden din inn i editorfeltet.
  2. Juster eventuelt sidestørrelsen (A4 eller Letter) og retningen.
  3. Klikk konverter; DOMPurify renser HTML-en og html2canvas gjengir den.
  4. Vent på at jsPDF koder lerretutdataene som PDF-sider.
  5. Last ned PDF-en.

Vanlige bruksområder

  • Du genererte en HTML-faktura i nettleseren din fra en lokal mal og vil ha en PDF-kopi uten å sende den til en konverteringstjeneste.
  • En enkel HTML-rapport bygget fra API-data må lagres som PDF for arkivering; lim inn HTML-en og konverter lokalt.
  • Du skrev en styled HTML-e-postmal og vil forhåndsvise hvordan den ville se ut skrevet ut som PDF.
  • En utvikler trenger en rask PDF fra et HTML-fragment under testing, uten å sette opp en hodeløs nettleser på serversiden.

Ofte stilte spørsmål

Hvorfor er teksten i utdata-PDF-en ikke valgbar?

Konverteringspipelinen gjengir HTML-en til et lerret-bitmap ved hjelp av html2canvas, og koder deretter det bitmapet som bildedata inne i PDF-sidene med jsPDF. Utdataene er et rasterisert bilde, ikke et tekstlag. Hvis du trenger en PDF med valgbar tekst, trenger du en hodeløs nettleser på serversiden som Puppeteer, noe dette verktøyet bevisst unngår for å holde behandlingen lokal.

Hvorfor vises ikke bildene i HTML-en min i PDF-en?

Bilder lastet fra eksterne URL-er er underlagt nettleserens CORS-policy. Hvis bildeserveren ikke sender tillatelsesvennlige CORS-hoder, kan html2canvas ikke lese pikseldata og bildesporet gjengis tomt. Innebygde base64-kodede bilder direkte i HTML-en eller bilder fra samme opprinnelse fungerer uten denne begrensningen.

Sendes HTML-en jeg limer inn til en server?

Nei. HTML-en forblir i nettleserminnet gjennom hele prosessen. DOMPurify renser den på klientsiden, html2canvas gjengir den på klientsiden, og jsPDF koder PDF-en på klientsiden. Ingenting forlater nettleserfanen.

Hva fjerner DOMPurify-rensingen?

DOMPurify fjerner skript-tagger, hendelseshåndterer-attributter som onclick og onload, javascript:-URL-er og andre konstruksjoner som kan kjøre kode. Det bevarer strukturell og styling-kode, slik at det gjengitte resultatet ser det samme ut, men er trygt å sette inn i en dokumentkontekst.

Kan jeg konvertere en fullstendig nettside-URL i stedet for å lime inn HTML?

Nei. Verktøyet fungerer med HTML-kode du limer inn direkte. Lasting av en URL ville kreve henting av siden, noe som støter på CORS-begrensninger for de fleste nettsteder og ville involvere en nettverksforespørsel som tar operasjonen utenfor den lokale behandlingsmodellen.