Jak przekonwertować HTML do PDF: print CSS, window.print() | We.Inc
Zamień HTML w czysty PDF: zapisz z okna drukowania, napisz print CSS z @page i break-inside, wywołaj window.print() lub renderuj na serwerze. Z kreatorem print CSS.
Najszybszy sposób na zamianę strony internetowej w PDF to wbudowane okno drukowania przeglądarki: otwórz je, wybierz zapis jako PDF i zapisz. Aby kontrolować wygląd tego PDF, dodaj print CSS z @media print i @page dla rozmiaru papieru i marginesów. Dla PDF tworzonych automatycznie renderuj stronę w przeglądarce headless, takiej jak Puppeteer lub Playwright.
Sposoby tworzenia PDF z HTML
Metoda
Gdzie działa
Zaznaczalny tekst
Najlepsze do
Okno drukowania, zapis jako PDF
Dowolna przeglądarka na komputerze
Tak
Jednorazowe kopie strony
Przycisk window.print()
Przeglądarka odwiedzającego
Tak
Faktury, paragony, bilety
Puppeteer page.pdf()
Node.js sterujący Chrome
Tak
Automatyczne raporty na serwerze
Playwright page.pdf()
Skrypt Playwright sterujący przeglądarką
Tak
Automatyczne PDF w istniejącym środowisku testowym
Przeglądarka odwiedzającego
Nie, strona staje się obrazem
Szybkie pobieranie po stronie klienta
jsPDF
Przeglądarka odwiedzającego
Tak, dla tekstu, który rysujesz
Budowanie PDF z danych w kodzie
Każda metoda na tej stronie ostatecznie prosi silnik przeglądarki o rozłożenie strony na papierze, więc dobry print CSS poprawia wyniki każdej z nich. Zbuduj poniżej startowy arkusz stylów do druku, a potem wybierz sposób konwersji pasujący do tego, kto naciska przycisk: osoba, Twoja strona czy serwer.
Wybierz rozmiar papieru, orientację i margines dla reguły @page.
Skopiuj CSS do swojego arkusza stylów; działa tylko podczas drukowania.
Otwórz podgląd wydruku w przeglądarce i wybierz zapis jako PDF, aby sprawdzić wynik.
Traktuj podgląd wydruku jako stanowisko testowe. Odświeża się przy każdej zmianie CSS i nic nie kosztuje.
Ukryj w wydruku nawigację, banery cookie i paski boczne; na papierze nikt ich nie kliknie.
Trzymaj tabele, ilustracje i bloki kodu w całości dzięki break-inside: avoid.
Przeglądarki domyślnie pomijają kolory tła przy druku. print-color-adjust: exact prosi o ich zachowanie, ale ustawienia drukowania odwiedzającego i tak mają pierwszeństwo.
Używaj pt, mm lub in dla rozmiarów w druku, gdy potrzebujesz dokładnych wymiarów fizycznych.
Najczęściej zadawane pytania
Jak zapisać stronę internetową jako PDF bez żadnych narzędzi?
Otwórz okno drukowania przeglądarki z jej menu lub skrótem klawiszowym, a następnie wybierz opcję PDF na liście miejsc docelowych lub drukarek. Jej dokładna nazwa zależy od przeglądarki i systemu operacyjnego.
Jak dodać przycisk Pobierz PDF na swojej stronie?
Najprostsza uczciwa wersja to przycisk wywołujący window.print(), który otwiera to samo okno, w którym odwiedzający może zapisać PDF. Nie wymaga żadnej biblioteki, zachowuje zaznaczalny tekst i używa Twojego print CSS.
Jak zapobiec dzieleniu tabeli na dwie strony?
Dodaj break-inside: avoid do tabeli albo do jej wierszy, jeśli tabela jest długa. Starsze page-break-inside: avoid jest traktowane jako alias, więc nadal działa w starszych arkuszach stylów.
Czy mogę ustawić rozmiar papieru w CSS?
Tak. @page { size: A4 portrait; margin: 15mm; } ustawia rozmiar i marginesy strony. Puppeteer używa tego tylko wtedy, gdy preferCSSPageSize ma wartość true; w przeciwnym razie decyduje jego własna opcja format, domyślnie Letter.
Dlaczego html2pdf.js tworzy rozmyte lub ogromne PDF?
Jego README wyjaśnia, że renderuje treść do obrazu i umieszcza ten obraz w PDF, więc tekstu nie da się zaznaczyć ani przeszukać, a pliki są duże. Gdy tekst ma znaczenie, użyj drukowania lub przeglądarki headless.
Print CSS to podstawa
Blok @media print pozwala zmienić styl strony na potrzeby papieru bez ruszania wyglądu na ekranie. Ukryj to, co nie ma sensu na papierze, poszerz kolumnę z treścią i ustaw czytelny rozmiar czcionki.
Reguła @page kontroluje samą stronę: rozmiar, marginesy i orientację, a :first, :left i :right pozwalają inaczej potraktować wybrane strony. MDN oznacza @page jako Baseline newly available od grudnia 2024, przy czym niektóre elementy nadal różnią się między przeglądarkami.
Kiedy renderować na serwerze
Jeśli PDF muszą powstawać bez udziału człowieka, na przykład nocny raport lub faktura wysyłana mailem, uruchom przeglądarkę headless. page.pdf() w Puppeteer drukuje z typem mediów print, przyjmuje opcje takie jak format, margin i printBackground i może zapisać plik bezpośrednio pod wskazaną ścieżką.
Renderowanie na serwerze daje za każdym razem ten sam wynik, bo kontrolujesz wersję przeglądarki i czcionki. Oznacza też konieczność uruchomienia i zabezpieczenia tej przeglądarki, więc sięgaj po nie tylko wtedy, gdy przycisk drukowania nie wystarcza.
Ściągawka print CSS
Reguły i właściwości kształtujące drukowane strony
CSS
Wartości
Zastosowanie
@media print { }
Dowolne reguły
Style działające tylko przy drukowaniu lub zapisie do PDF
@page { size }
A5, A4, A3, B5, B4, letter, legal, ledger lub długości; portrait lub landscape
Rozmiar i orientacja papieru
@page { margin }
Długości
Marginesy każdej strony
@page :first
Pseudoklasa
Inne marginesy na pierwszej stronie
auto, avoid, avoid-page, avoid-column
Trzymanie bloku na jednej stronie
break-before / break-after
auto, avoid, page, left, right
Wymuszenie lub zablokowanie podziału przy bloku
economy, exact
Czy przeglądarka może pominąć kolory i tła
Przykłady do skopiowania
Przycisk drukowania lub zapisu jako PDF
window.print() otwiera okno drukowania i blokuje stronę do jego zamknięcia. Klasa sprawia, że sam przycisk nie trafia na papier.
Układ faktur, w którym każda faktura zaczyna się na nowej stronie
break-after: page po każdej fakturze daje jedną fakturę na arkusz, gdy drukujesz kilka naraz.
Przygotowanie strony tuż przed drukowaniem
beforeprint i afterprint wywoływane są wokół okna drukowania, co przydaje się do rozwijania zwiniętych sekcji.
PDF po stronie serwera z Puppeteer
preferCSSPageSize sprawia, że rozmiar z @page wygrywa z opcją format; printBackground zachowuje tła.
Kreator print CSS
Rozmiar papieru
Orientacja
Pionowa
Pozioma
Margines: {n} mm
Ukryj nawigację, stopkę i paski boczne
Trzymaj tabele, ilustracje i kod na jednej stronie