HTML na PDF

Zamień HTML na PDF z zachowaniem stylów CSS: kolorów, czcionek, tabel i układu strony. Wklej kod albo wczytaj plik .html, ustaw format i marginesy, a PDF zapisze Twoja przeglądarka. Tekst w pliku da się zaznaczać i przeszukiwać, a kod nie trafia na nasz serwer.

Ustawienia PDF

Otworzy się okno drukowania przeglądarki. Jako drukarkę (miejsce docelowe) wybierz „Zapisz jako PDF”. Jeśli nie chcesz daty i adresu na marginesach, wyłącz w nim opcję „Nagłówki i stopki”.

PDF tworzy Twoja przeglądarka. Kod nie jest wysyłany na nasz serwer. Obrazki, arkusze stylów i czcionki, do których odwołuje się kod, przeglądarka pobiera z ich adresów.

Jak zamienić HTML na PDF

  1. Wklej kod HTML do pola albo kliknij „Wczytaj plik .html”. Pod ustawieniami zobaczysz podgląd dokumentu z jego stylami.
  2. Wybierz format strony, orientację i marginesy. Jeśli kod sam określa wymiary strony regułą @page, wybierz „jak w kodzie”.
  3. Kliknij „Zapisz jako PDF”. Otworzy się okno drukowania przeglądarki: jako drukarkę wybierz „Zapisz jako PDF” i zapisz plik.

Nazwa pliku powstaje z pola „Nazwa pliku”, a gdy je zostawisz puste, ze znacznika <title> albo pierwszego nagłówka <h1>. W oknie drukowania możesz ją jeszcze zmienić.

Dlaczego PDF zapisuje przeglądarka

Dokument HTML to nie tylko treść, ale też arkusz stylów: kolory, marginesy, siatka kolumn, czcionki z internetu. Konwertery, które rozkładają HTML na własne elementy PDF, rozumieją zwykle tylko część CSS, więc faktura czy oferta z własnym układem wychodzi z nich rozsypana. Najwierniejszy wynik daje silnik, który na co dzień wyświetla strony, czyli przeglądarka. Dlatego narzędzie przygotowuje dokument, pokazuje go w podglądzie i przekazuje do funkcji drukowania, która zapisuje PDF z tym samym wyglądem.

Tak przygotowany PDF zawiera prawdziwy tekst, a nie zrzut ekranu, więc da się go zaznaczać i przeszukiwać, a linki pozostają klikalne.

Ustawienia

  • Format i orientacja - A4, Letter albo A5, pionowo lub poziomo. Opcja „jak w kodzie” zostawia wymiary z reguły @page w Twoim CSS.
  • Marginesy - brak, wąskie (1 cm) albo normalne (2 cm). Marginesy „brak” przydają się przy dokumentach, które mają własne tło na całą stronę.
  • Drukuj tła i kolory - przeglądarki przy drukowaniu domyślnie pomijają kolory tła, żeby oszczędzać tusz. Bez tej opcji biały tekst na kolorowym pasku zniknie, bo zostanie na białym papierze. Opcja jest domyślnie włączona.
  • Adres bazowy - jeśli kod odwołuje się do obrazków i stylów ścieżkami względnymi (na przykład img/logo.png), podaj adres strony, na której leżą te pliki. Bez adresu bazowego takie zasoby się nie wczytają.

Okno drukowania w różnych przeglądarkach

  • Chrome i Edge - w polu „Miejsce docelowe” (lub „Drukarka”) wybierz „Zapisz jako PDF”. W „Więcej ustawień” wyłącz „Nagłówki i stopki”, jeśli nie chcesz daty, tytułu i adresu na marginesach.
  • Firefox - jako drukarkę wybierz pozycję zapisu do pliku PDF (ma „PDF” w nazwie).
  • Safari na Macu - w lewym dolnym rogu okna drukowania rozwiń menu „PDF” i wybierz „Zachowaj jako PDF”.
  • Telefon - na Androidzie w Chrome wybierz drukarkę „Zapisz jako PDF”. Na iPhonie podgląd wydruku można udostępnić jako plik PDF, na przykład do aplikacji Pliki.

Ograniczenia i wskazówki

JavaScript nie jest wykonywany. Dokument wyświetla się w odizolowanej ramce bez skryptów, dzięki czemu wklejenie cudzego kodu jest bezpieczne. Jeśli treść strony buduje skrypt, na przykład wykres albo tabelę ładowaną z serwera, w PDF jej nie będzie. Taką stronę otwórz w przeglądarce i wydrukuj ją stamtąd skrótem Ctrl+P (na Macu Cmd+P).

Podział na strony ustawisz w CSS. Reguła break-before: page zaczyna element od nowej strony, a break-inside: avoid nie pozwala rozciąć go między dwie strony, co przydaje się przy wierszach tabel i ramkach. Style tylko do druku umieść w bloku @media print { … }.

Cała strona internetowa z adresu - narzędzie pracuje na kodzie, a nie na adresach stron. Stronę, którą masz otwartą w przeglądarce, zapiszesz jako PDF bezpośrednio z jej okna drukowania. Kierunek odwrotny, czyli tekst z gotowego PDF jako HTML albo Markdown, obsługuje narzędzie PDF na HTML.

Prywatność

Kod HTML i wczytany plik zostają w Twojej przeglądarce: nie wysyłamy ich na nasz serwer i nigdzie nie zapisujemy. Przeglądarka pobiera jedynie zasoby, do których odwołuje się sam kod, czyli obrazki, arkusze stylów i czcionki z ich adresów.

Najczęstsze pytania

Dlaczego w PDF nie ma kolorowego tła?

Sprawdź, czy opcja „Drukuj tła i kolory” jest zaznaczona. Jeśli tło nadal nie wychodzi, w oknie drukowania Chrome i Edge rozwiń „Więcej ustawień” i włącz drukowanie grafiki tła.

Jak zamienić plik HTML zapisany na dysku?

Kliknij „Wczytaj plik .html” i wskaż plik. Jeśli obok niego leżą obrazki albo arkusze stylów, a kod odwołuje się do nich ścieżkami względnymi, najprościej otworzyć sam plik w przeglądarce (dwuklik) i wydrukować go do PDF stamtąd, bo wtedy przeglądarka widzi cały folder.

Mam treść w Markdown, a nie w HTML

Użyj narzędzia Markdown na PDF, które pobiera gotowy plik bez okna drukowania, albo Markdown na Word, jeśli dokument ma być dalej edytowany. Kod HTML z Markdownu wygenerujesz w konwerterze Markdown i HTML.

Czy narzędzie jest bezpłatne?

Tak, bez rejestracji, bez znaku wodnego i bez limitu plików. Zobacz też pozostałe narzędzia marketingowe.