Ingen uppladdning, 100% lokalt, inget konto

HTML till PDF

Klistra in HTML, välj en sidstorlek och ladda ner en PDF, allt renderas i webbläsaren.

Så fungerar HTML till PDF

HTML till PDF tar HTML-kod du klistrar in i redigeraren, sanerar den med DOMPurify för att ta bort skript och osäkra attribut, renderar den på en utanför skärmen canvas med html2canvas, och kodar resultatet till en PDF med jsPDF. Hela pipelinen körs inuti din webbläsarflik; ingen HTML-kod eller renderad utdata skickas till någon server. Det gör den lämplig för konvertering av HTML-fragment som innehåller personuppgifter du inte vill klistra in i en onlinetjänst.

Förstå dig på utdataformatet innan du förlitar dig på det. PDF-sidorna är rasterbilder, inte vektortext. Text i utdatafilen är inte markerbar, inte sökbar och kan inte bytas om. Externa resurser som bilder refererade av URL blockeras av webbläsarens CORS-policy och läses inte in. Inline-stilar och inbäddad CSS fungerar, men komplexa layouter med anpassade webbtypsnitt eller avancerat CSS-rutnät kanske inte renderas korrekt. För dokumenttrogen konvertering av hela webbsidor är en headless-webbläsare på serversidan ett mer lämpligt verktyg.

Skrivet av Bastien Sulyan

Så här använder du HTML till PDF, steg för steg

  1. Klistra in din HTML-kod i redigeringsområdet.
  2. Justera vid behov sidstorleken (A4 eller Letter) och orienteringen.
  3. Klicka på konvertera; DOMPurify sanerar HTML-koden och html2canvas renderar den.
  4. Vänta på att jsPDF kodar canvasutdatan som PDF-sidor.
  5. Ladda ned PDF-filen.

Vanliga användningsområden

  • Du genererade en HTML-faktura i din webbläsare från en lokal mall och vill ha en PDF-kopia utan att e-posta den till en konverteringstjänst.
  • En enkel HTML-rapport byggd från API-data behöver sparas som PDF för arkivering; klistra in HTML-koden och konvertera lokalt.
  • Du skrev en formaterad HTML-e-postmall och vill förhandsgranska hur den ser ut utskriven som PDF.
  • En utvecklare behöver en snabb PDF från ett HTML-fragment under testning, utan att sätta upp en headless-webbläsare på serversidan.

Vanliga frågor

Varför är texten i utdata-PDF-filen inte markerbar?

Konverteringspipelinen renderar HTML-koden till en canvasbitmapp med html2canvas och kodar sedan bitmappen som bilddata inuti PDF-sidorna med jsPDF. Utdatafilen är en rastriserad bild, inte ett textlager. Om du behöver en PDF med markerbar text behöver du en headless-webbläsare på serversidan som Puppeteer, vilket det här verktyget avsiktligt undviker för att hålla bearbetningen lokal.

Varför visas inte bilder i min HTML i PDF-filen?

Bilder inlästa från externa URL:er är föremål för webbläsarens CORS-policy. Om bildservern inte skickar tillåtande CORS-rubriker kan html2canvas inte läsa pixeldata och bildplatsen renderas tom. Inline base64-kodade bilder inbäddade direkt i HTML-koden eller bilder från samma ursprung fungerar utan den här begränsningen.

Skickas HTML-koden jag klistrar in till en server?

Nej. HTML-koden stannar i webbläsarminnet hela tiden. DOMPurify sanerar den på klientsidan, html2canvas renderar den på klientsidan, och jsPDF kodar PDF-filen på klientsidan. Ingenting lämnar webbläsarfliken.

Vad tar DOMPurify-sanering bort?

DOMPurify tar bort skripttaggar, händelsehanterarattribut som onclick och onload, javascript:-URL:er och andra konstruktioner som kan exekvera kod. Det bevarar strukturell och stilistisk uppmärkning, så den renderade utdatan ser likadan ut men är säker att infoga i ett dokumentsammanhang.

Kan jag konvertera en fullständig webbsidas URL i stället för att klistra in HTML?

Nej. Verktyget fungerar med HTML-kod du klistrar in direkt. Att läsa in en URL kräver hämtning av sidan, vilket stöter på CORS-begränsningar för de flesta webbplatser och skulle innebära en nätverksbegäran som tar operationen utanför den lokala bearbetningsmodellen.