HTML na PDF

How are you sending the HTML?
⚠ Heads up — read this first
Complex modern CSS (flexbox edge cases, grid, custom properties, container queries) may render imperfectly. For pixel-perfect web → PDF, use the browser's built-in Print → Save as PDF. This tool is for quick conversions where round-trip-perfect isn't required.

🔒 Everything happens in your browser. Nothing uploads. Close the tab and it's gone.

Konwerter HTML na PDF zamienia dowolny HTML — wklejony markup, plik .html albo publiczny URL — w pobieralny PDF. Wybierz A4 lub Letter, portret lub poziomo i margines. Strona jest renderowana do canvasu off-screen za pomocą html2canvas, kafelkowana w strony PDF przez jsPDF i oddawana Ci jako pojedynczy plik. Działa w całości w Twojej przeglądarce; nic nie jest wysyłane. Bądźmy uczciwi co do limitów: html2canvas re-implementuje podzbiór CSS, więc edge case'y flexboxa, grid i custom properties mogą renderować się niedokładnie. Dla wyjścia idealnego na poziomie pikseli użyj Drukuj → Zapisz jako PDF w przeglądarce. Tryb URL jest best-effort — większość publicznych stron blokuje cross-origin fetch (CORS), więc 'Wklej HTML' to niezawodna ścieżka dla nich.

Built by Bob Article by Lace QA by Ben Shipped

Jak używać

  1. 1

    Wybierz tryb. Wklej HTML działa dla każdego markupu, który już masz. Prześlij .html akceptuje lokalny plik. Z URL pobiera publiczną stronę (większość zawiedzie z powodu CORS — zobacz FAQ).

  2. 2

    Ustaw rozmiar strony (A4 lub Letter), orientację (portret lub poziomo) i margines (0, 10, 20 lub 40 mm). Domyślne to A4 / portret / 20 mm.

  3. 3

    Kliknij Konwertuj na PDF. HTML jest renderowany w ukrytym div-ie, html2canvas przechwytuje go w skali 2×, a jsPDF kafelkuje wynik przez tyle stron, ile potrzeba.

  4. 4

    Kliknij Pobierz. Nazwa pliku wyjściowego pochodzi ze źródła: wklejony HTML → webpage.pdf, przesłany plik → odzwierciedla nazwę, URL → pochodzi z nazwy hosta (example.com → example-com.pdf).

Często zadawane pytania

Ratings & Reviews

Rate this tool

Sign in to rate and review this tool.

Loading reviews…

Co robi Konwerter HTML na PDF

Konwerter HTML na PDF bierze dowolny HTML, który masz — wklejony markup, przesłany plik .html albo publiczny URL — i zamienia go w pobieralny PDF. Strona jest renderowana do canvasu off-screen za pomocą html2canvas, kafelkowana na strony PDF przez jsPDF i oddawana jako pojedynczy plik. Wybierz A4 lub Letter, portret lub poziomo i margines. Wszystko dzieje się w Twojej przeglądarce. Nic nie jest wysyłane.

Bądźmy uczciwi co do wymiany. html2canvas re-implementuje podzbiór CSS w JavaScript — czyta obliczone style z DOM i maluje je na canvasie. Trafia typowe rzeczy: kolory, czcionki, padding, obramowania, tła, proste pozycjonowanie, podstawowy flexbox. Ma kłopoty z edge case'ami: skomplikowanymi układami grid, subgrid, wyrównaniem baseline, procentowymi odstępami wewnątrz kontenerów flex, niektórymi obliczeniami układu z custom-property. Dla wyjścia idealnego na poziomie pikseli wygrywa własne Drukuj → Zapisz jako PDF przeglądarki — używa prawdziwego silnika renderowania. Nasze narzędzie jest dla przypadku, gdy masz surowy HTML w ręku i chcesz PDF bez otwierania karty przeglądarki najpierw.

Jak używać

Widget ma trzy tryby wejścia. Wybierz ten, który pasuje do Twojej sytuacji.

  1. Wybierz tryb. Wklej HTML działa dla każdego markupu, który już masz. Prześlij .html akceptuje lokalny plik. Z URL pobiera publiczną stronę (większość zawiedzie z powodu CORS — zobacz poniżej).
  2. Ustaw rozmiar strony (A4 lub Letter), orientację (portret lub poziomo) i margines (0, 10, 20 lub 40 mm). Domyślne to A4 / portret / 20 mm.
  3. Kliknij Konwertuj na PDF. HTML jest renderowany w ukrytym div-ie, html2canvas przechwytuje go w skali 2× dla ostrości, a jsPDF kafelkuje wynik przez tyle stron, ile potrzeba.
  4. Kliknij Pobierz. Nazwa pliku wyjściowego pochodzi ze źródła: wklejony HTML → webpage.pdf, przesłany plik → odzwierciedla nazwę, URL → pochodzi z nazwy hosta (example.comexample-com.pdf).

Nic w Twoim HTML nie trafia do serwera, który kontrolujemy. Tryb wklejania i tryb przesyłania są całkowicie lokalne — otwórz zakładkę sieci w przeglądarce podczas konwersji, a zobaczysz zero żądań wychodzących. Tryb URL robi dokładnie jedno żądanie: Twoja przeglądarka pobiera URL, który wpisałeś, a odpowiedź zostaje w pamięci przeglądarki.

Trzy tryby wejścia i kiedy używać każdego

Każdy tryb rozwiązuje inny problem. Wybranie właściwego z góry oszczędza czas.

TrybCo akceptujeDziała naNajlepszy dla
Wklej HTMLDowolny markup w textareaWszystkim (markup jest już lokalny)Szablony maili, fragmenty CMS, wyeksportowane raporty, wszystko, co możesz skopiować-wkleić
Prześlij .htmlLokalny plik .htmlWszystkim (plik jest już lokalny)Standalone raporty HTML, wygenerowane faktury, wyeksportowane notatniki
Z URLPubliczny URL z pozwalającym CORSMniej więcej 5% publicznych URL-i (endpointy z CORS, środowiska dev, Twoje własne strony)Szybkie pobrania z API zwracających HTML, Twoje własne strony, gdzie kontrolujesz nagłówki

Jeśli próbowałeś trybu URL i dostałeś błąd, natknąłeś się na Cross-Origin Resource Sharing — funkcja bezpieczeństwa przeglądarki, nie bug, który możemy załatać. Obejście jest uniwersalne: otwórz URL w normalnej karcie, prawy klik → Zobacz źródło strony (albo DevTools → Elements → Copy outerHTML na tagu <html>, jeśli strona jest renderowana JS) i wklej to do trybu Wklej HTML. HTML jest teraz lokalny, CORS już nie obowiązuje, a konwersja działa.

Konkretny przykład z prawdziwymi liczbami

Załóżmy, że masz szablon maila HTML — marketingowe ogłoszenie, 1200 słów treści, dwa obrazy nagłówka, przycisk CTA, stopkę z linkami społecznościowymi. Około 18 KB HTML i 240 KB inline obrazów, wszystko w jednym pliku .html z pojedynczym blokiem <style> na górze.

Przy A4 / portret / 20mm margines: konwersja zajmuje 2,5 sekundy. Wyjście to 1,3 MB przez 3 strony. Obraz hero jest ostry, typografia czyta się czysto, przycisk CTA zachowuje kształt i kolor, loga w stopce renderują się we właściwym rozmiarze. Jedyna widoczna różnica od źródła: stan hover na CTA nie jest przechwycony (renderujemy spoczywający DOM, bez symulacji hover), a flex-wrap stopki umieścił jedną ikonę w drugim wierszu, bo html2canvas zmierzył odstęp flex nieco inaczej niż prawdziwa przeglądarka.

Przy A4 / poziomo / 10mm margines: ta sama treść, 2 strony zamiast 3, nieco szersze długości linii. 1,1 MB. Letter / portret / 20mm: 3 strony, 1,3 MB, linie zawijają się na tych samych granicach słów co A4, bo kolumna jest niemal tej samej szerokości.

Teraz przerzuć wejście: dashboard single-page-app renderowany z React, serwowany z localhost:3000. Tryb URL pobiera bootstrap HTML i pomija każdy komponent, który React miał zamontować — dostajesz pusty PDF z spinnerem ładowania. Właściwy ruch: otwórz aplikację w karcie, pozwól się wyrenderować, skopiuj outerHTML z wyrenderowanego DOM, wklej w trybie Wklej HTML. PDF teraz pasuje do tego, co było na ekranie.

Jak to się porównuje do Adobe Acrobat, SmallPDF, iLovePDF

Wielkie usługi HTML-na-PDF — wersja webowa Adobe Acrobat, URL-na-PDF SmallPDF, HTML-na-PDF iLovePDF, PDFCrowd, DocRaptor — wszystkie działają po stronie serwera, co jest właściwą architekturą dla wierności, ale złą dla prywatności i szybkości.

Te usługi zwykle napędzają headless Chromium na swoim serwerze. Dajesz im URL lub HTML; oni odpalają przeglądarkę, nawigują do Twojej treści, uruchamiają JS, czekają na załadowanie czcionek i obrazów, a potem uderzają w API drukowania Chrome'a. Wyjście jest idealne na poziomie pikseli, bo wyszło z prawdziwej przeglądarki. Wady: Twój HTML i dowolne dane w nim podróżują do ich infrastruktury i siedzą w ich logach; czekasz w kolejce z zadaniami wszystkich innych; jest zwykle dzienna darmowa kwota i płatna warstwa zaczynająca się od 9-15 dolarów/miesiąc; a większość z nich wymaga konta przed drugim plikiem.

My robimy mniej, w Twojej przeglądarce, za darmo. Wymiana jest uczciwa: skomplikowany CSS może renderować się niedokładnie, JS się nie wykona (nie uruchamiamy skryptów w kontenerze renderowania off-screen), web fonts, które wymagają fetcha z CORS, mogą spaść do domyślnych, a bardzo długie strony mogą produkować duże wyjście. Dla szablonu maila, wyeksportowanego raportu, podglądu CMS lub wygenerowanej faktury — typowe zadania HTML-na-PDF — nasze narzędzie to właściwy wybór. Dla wypucowanej strony marketingowej, którą chcesz zarchiwizować bit po bicie, użyj Drukuj → Zapisz jako PDF Chrome'a albo jednej z usług po stronie serwera, jeśli skryptowanie tego jest warte kosztu.

Co html2canvas potrafi, a czego nie

html2canvas to silnik robiący pracę wizualną, a poznanie jego limitów oszczędza bólów głowy.

Działa dobrze:

  • Standardowe właściwości CSS. Kolor, background, font, padding, margin, border, border-radius, box-shadow, opacity — wszystkie renderują się tak samo jak w prawdziwej przeglądarce.
  • Style inline i tagi <style> w tym samym dokumencie. Jeśli Twój CSS jest wewnątrz HTML, który wklejasz, działa. Zawsze wklejaj swój CSS w pojedynczy blok <style> na górze dla najlepszych wyników.
  • Podstawowy flexbox. Układy wiersz i kolumna, proste wyrównanie, gap, podstawowe justify-content i align-items — w porządku dla ogromnej większości układów.
  • Obrazy inline i blokowe. JPEG i PNG osadzone w HTML albo odniesione przez absolutny URL z serwerów pozwalających CORS renderują się poprawnie.

Działa niedokładnie:

  • CSS Grid. Proste grids z jawnymi torami zwykle renderują się. Auto-placement, subgrid, named areas i grid-template-areas często nie.
  • Custom properties (CSS variables). Honorowane, gdy właściwość jest czytana bezpośrednio, ale niektóre łańcuchy obliczonych wartości psują się.
  • Edge case'y flexboxa. flex-wrap z dziećmi o mieszanej wysokości, wyrównanie baseline, procentowe odstępy, elementy z flex-basis: 0% — czasem układają się z nieco złymi wymiarami.
  • Web fonts ładowane z zewnętrznych domen. Jeśli nagłówki CORS czcionki pozwalają na odczyty cross-origin, renderuje się; w przeciwnym razie spadamy do systemowej serif.

Nie działa:

  • JavaScript. Nie wykonujemy skryptów w kontenerze renderowania. Jeśli Twój HTML polega na JS do wstrzykiwania treści (wykresy, SPA, cokolwiek dynamicznego), przechwyć wyrenderowany DOM w DevTools najpierw i wklej to.
  • iframes. Zawartość iframe żyje w innym kontekście dokumentu, którego html2canvas nie może odczytać.
  • Stany :hover, :focus, :active. DOM jest przechwytywany w spoczynku. Efekty hover nie są symulowane.
  • Animacje. Pojedyncza klatka jest przechwytywana. Przejścia CSS i animacje keyframe nie pojawiają się.

Kiedy Drukuj → Zapisz jako PDF przeglądarki to właściwa odpowiedź

Chrome, Firefox, Safari i Edge wszystkie mają wbudowaną opcję Zapisz jako PDF w dialogu drukowania. Używa prawdziwego silnika renderowania przeglądarki (Blink, Gecko, WebKit), co oznacza idealną wierność dla grid, flexboxa, web fonts i treści renderowanej przez JS. Obsługuje też Twoje cookies autoryzacji — strony za logowaniem renderują się poprawnie, bo dialog drukowania jest w tym samym kontekście przeglądarki co strona.

Haczyk: wymaga, żebyś faktycznie otworzył stronę w karcie i przeszedł przez dialog drukowania. To jest w porządku dla jednego lub dwóch PDF-ów. Jest męczące dla zadań wsadowych albo dla HTML, który dostałeś przez API albo eksport CMS. Nasze narzędzie jest dla tych — surowy HTML w ręku, chcesz PDF, nie chcesz odpalać karty. Drukuj → Zapisz jako PDF w przeglądarce to właściwe narzędzie dla wszystkiego innego.

Drzewo decyzyjne: idealny na poziomie pikseli, masz stronę otwartą w karcie → Drukuj → Zapisz jako PDF. Surowy HTML w ręku, „wystarczająco dobre" wyjście, bez uploadu → to narzędzie. Idealny na poziomie pikseli i musisz skryptować przez setki URL-i → headless Chromium przez Puppeteer albo jedna z płatnych usług.

Powiązane narzędzia PDF

Konwerter HTML na PDF paruje się z kilkoma innymi w drodze do gotowego dokumentu:

  • Obraz na PDF — spakuj folder obrazów w jeden PDF. Często właściwe narzędzie, jeśli Twój „HTML" to naprawdę stos zrzutów ekranu.
  • Łączenie PDF — połącz wyjście HTML-na-PDF z innymi PDF-ami (listem motywacyjnym, załącznikiem, podpisaną stroną) w jeden plik.
  • Kompresuj PDF — jeśli wyjście jest nieoczekiwanie duże (długie strony i dużo obrazów mogą popchnąć do 5-10 MB), przepuść je przez kompresor.
  • PDF na PNG — wyrenderuj każdą stronę PDF jako obraz, gdy masz już PDF w ręku.
  • Word na PDF — jeśli to, co naprawdę masz, to .docx, a wpadłeś na narzędzie HTML, to jest właściwy sąsiad.

Microapp wysyła każde narzędzie PDF po stronie przeglądarki. 10% każdego dolara przychodu idzie na cele charytatywne, z góry, audytowane kwartalnie — narzędzia muszą zarobić na te 10%, co oznacza, że muszą faktycznie działać bez zasypywania Cię upsellami.

Często zadawane pytania

Dlaczego mój URL zawodzi?

Cross-Origin Resource Sharing (CORS). Gdy Twoja przeglądarka pobiera URL z JavaScript na innej domenie, serwer docelowy musi to wyraźnie pozwolić nagłówkami odpowiedzi. Niemal żadna publiczna strona tego nie robi. To funkcja bezpieczeństwa przeglądarki, nie coś, co możemy obejść w stronie. Niezawodna ścieżka: otwórz URL w normalnej karcie przeglądarki, zobacz źródło (albo prawy klik → Zobacz źródło strony), skopiuj HTML i wklej go w trybie Wklej HTML tutaj. To omija CORS w całości, bo HTML jest teraz lokalny. Strony wymagające logowania też nie zadziałają — potrzebują Twoich cookies sesji, których nasz fetch nie może pożyczyć.

Czy zachowuje CSS?

Większość, tak — ale nie wszystko. html2canvas czyta obliczone style z wyrenderowanego DOM i maluje je na canvasie. Standardowy kolor, czcionka, padding, border, background i podstawowe pozycjonowanie wszystko działa. Style inline, tagi <style> wewnątrz Twojego HTML i style stosowane przez nazwy klas, które docierają do Twojego stylesheet, wszystkie uczestniczą. Haczyk: jeśli Twój HTML odwołuje się do zewnętrznych stylesheets na innych domenach, mogą być blokowane przez CORS jak fetch URL powyżej — w tym przypadku wyrenderowane wyjście używa domyślnych stylów dla tych reguł. Dla najlepszych wyników wklej swój CSS w bloku <style> na górze HTML, który wklejasz.

A co z flexbox i grid?

Flexbox: głównie działa dla typowych przypadków (układy wiersz/kolumna, podstawowe wyrównanie). Edge case'y — flex-wrap z mieszanymi dziećmi, wyrównanie baseline, procentowe odstępy — czasem renderują się ze złymi wymiarami. Grid: częściowe wsparcie. Proste grids z jawnymi torami wiersz/kolumna zwykle działają; auto-placement, subgrid i named areas często nie. Custom properties CSS (--my-var) są honorowane, gdy są czytane bezpośrednio, ale psują niektóre obliczenia układu. Jeśli Twój dokument zależy mocno od nowoczesnego układu, użyj Drukuj → Zapisz jako PDF w przeglądarce (Chrome, Firefox, Safari wszystkie wspierają) zamiast tego — to używa prawdziwego silnika renderowania przeglądarki, nie reimplementacji JS.

A co z JavaScriptem?

Nie wykonywany. Nic nie strippujemy, ale html2canvas przechwytuje DOM tak, jak istnieje, gdy mu go podajemy — a my nie uruchamiamy skryptów w kontenerze renderowania off-screen. Jeśli Twój HTML polega na JS do wstrzykiwania treści, uruchom ten JS w zwykłej karcie przeglądarki najpierw, zobacz źródło wyrenderowanego DOM (DevTools → Elements → Copy outerHTML na <html>) i wklej post-JS wersję tutaj. Wykresy, single-page apps, wszystko, co buduje się samo z JS — przechwyć wyrenderowany DOM, a potem konwertuj.

Jak to się ma do Drukuj → Zapisz jako PDF w przeglądarce?

Drukuj → Zapisz jako PDF używa prawdziwego silnika układu Twojej przeglądarki (Blink w Chrome, WebKit w Safari, Gecko w Firefoxie), więc trafia wszystko — flexbox, grid, web fonts, treść renderowaną przez JS, idealną typografię. Haczyk: wymaga, żebyś najpierw otworzył stronę w karcie i przeszedł przez dialog drukowania. Nasze narzędzie jest dla przypadku, gdy masz surowy HTML (szablon maila, który testujesz, wyeksportowany raport, fragment z CMS) i chcesz PDF bez otwierania w przeglądarce najpierw. Użyj Drukuj dla wierności, użyj tego dla szybkości i przyjaznego automatyzacji wejścia surowego HTML.

Czy mój HTML naprawdę nie jest wysyłany?

Zgadza się dla Wklej HTML i Prześlij .html — oba działają w całości w Twojej przeglądarce, bez żądań wychodzących. Dla Z URL jest dokładnie jedno żądanie wychodzące: Twoja przeglądarka pobiera URL, który wpisałeś, i to wszystko; pobrany HTML zostaje w pamięci i nigdy nie dociera do naszych serwerów. Zweryfikuj w zakładce sieci przeglądarki. PDF jest budowany lokalnie i pobierany przez blob URL.

Dlaczego wyjście jest większe, niż się spodziewałem?

Bo strona zostaje zrasteryzowana do canvasu, a potem ponownie zakodowana jako JPG, gdy ląduje w PDF. Długa strona z dużą ilością obrazów może łatwo wyprodukować wielo-MB PDF nawet z kilku KB źródłowego HTML. Jeśli rozmiar ma znaczenie, przepuść wynik przez nasz Kompresor PDF — dla wyjścia z dużą ilością obrazów często spadnie 50-70%.

Czy mogę konwertować stronę chronioną hasłem albo za logowaniem?

Nie z trybu URL — nasz fetch nie ma dostępu do cookies przeglądarki ani nagłówków autoryzacji. Obejście: otwórz stronę w swojej normalnej karcie przeglądarki (gdzie jesteś zalogowany), otwórz DevTools → Elements, prawy klik na tag <html> → Copy → Copy outerHTML, a potem wklej to do Wklej HTML. To przechwytuje w pełni wyrenderowaną, uwierzytelnioną stronę, włącznie z dowolnym DOM, który JS zbudował po logowaniu.