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.
- 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).
- 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.
- 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.
- 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).
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.
| Tryb | Co akceptuje | Działa na | Najlepszy dla |
|---|---|---|---|
| Wklej HTML | Dowolny markup w textarea | Wszystkim (markup jest już lokalny) | Szablony maili, fragmenty CMS, wyeksportowane raporty, wszystko, co możesz skopiować-wkleić |
| Prześlij .html | Lokalny plik .html | Wszystkim (plik jest już lokalny) | Standalone raporty HTML, wygenerowane faktury, wyeksportowane notatniki |
| Z URL | Publiczny URL z pozwalającym CORS | Mniej 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.