Jak konwertować HTML na PDF
Tworzenie PDF z HTML jest przydatne do generowania faktur, raportów, listów, certyfikatów — każdego dokumentu, w którym chcesz kontrolować układ za pomocą CSS, ale dystrybuować w postaci PDF.
Jak konwertować HTML na PDF
- Wklej swój HTML — wprowadź swój kod HTML, w tym CSS inline lub tagi
<style>, w edytorze. Kod może zawierać pełną strukturę strony z nagłówkami, tabelami, obrazami i stylami. - Podejrzyj renderowanie — podgląd na żywo pokazuje dokładnie, jak Twój PDF zostanie wyrenderowany w miarę pisania. Dostosuj HTML i CSS, aż renderowanie będzie odpowiadać Twoim oczekiwaniom.
- Generuj i pobierz — kliknij przycisk generowania, aby utworzyć PDF w swojej przeglądarce, a następnie pobierz go natychmiast.
Co możesz utworzyć
- Faktury i paragony — strukturyzowane tabele z tożsamością firmy, liniami przedmiotów i sumami
- Raporty — sformatowane dokumenty z nagłówkami, akapitami, wykresami i tabelami danych
- Certyfikaty — stylizowane układy z niestandardowymi czcionkami, obramowaniami i wyśrodkowanym tekstem
- Listy — profesjonalna korespondencja z nagłówkiem, treścią i strefą podpisu
- CV — dopracowane układy eksportowane jako czysty PDF do Twoich aplikacji
Wskazówki dotyczące stylu dla wyjścia PDF
Używaj stylów inline lub tagów <style> — zewnętrzne arkusze stylów nie są ładowane. Umieść cały swój CSS albo inline na elementach, albo w bloku <style> HTML.
Zdefiniuj marginesy strony — użyj @page { margin: 20mm; } w CSS, aby kontrolować przestrzeń wokół swojej treści w PDF.
Używaj jednostek odpowiednich do druku — mm, cm i pt są bardziej przewidywalne w PDF niż px lub rem. Używaj mm dla marginesów i odstępów, które muszą odpowiadać fizycznym wymiarom.
Unikaj układów zależnych od okna — szerokości w procentach i stałe szerokości w pikselach działają najlepiej. Jednostki związane z oknem (vw, vh) mogą nie zachowywać się zgodnie z oczekiwaniami w PDF.
Wskazówki
- Najpierw podejrzyj — zawsze sprawdzaj podgląd na żywo przed generowaniem. Znacznie szybciej iteruje się na HTML niż regenerować PDF za każdym razem.
- Używaj base64 dla obrazów — konwertuj obrazy na Data URI base64, aby zagwarantować ich włączenie do PDF. Zewnętrzne URL mogą zawieść z powodu ograniczeń CORS.
- Pozostań prosty — złożone układy CSS (zagnieżdżone siatki, nakładające się elementy pozycjonowane) mogą nie renderować się idealnie. Prostsze układy dają bardziej niezawodne PDF.
- Przetestuj podziały stron — dla dokumentów wielostronicowych użyj
page-break-before: always, aby kontrolować, gdzie zaczynają się nowe strony.
Najczęściej zadawane pytania
Czy PDF zachowuje mój styl CSS?
Tak. Konwerter renderuje Twój HTML z zastosowanym CSS, w tym kolorami, czcionkami, marginesami i układem. PDF wygląda jak wyrenderowana strona internetowa, a nie surowy kod źródłowy.
Czy mogę uwzględnić obrazy w PDF?
Tak. Używaj obrazów w base64 (Data URI), aby uzyskać najbardziej niezawodne wyniki. Zewnętrzne URL obrazów mogą działać, jeśli są dostępne i zgodne z CORS.
Czy mój HTML jest wysyłany na serwer?
Nie. Konwersja odbywa się całkowicie w Twojej przeglądarce. Twój kod i wygenerowany PDF nigdy nie opuszczają Twojego urządzenia.
Jakie funkcje CSS są obsługiwane?
Standardowy CSS, w tym układy, kolory, czcionki, tła, obramowania i tabele, jest dobrze obsługiwany. Funkcje zaawansowane jak CSS Grid, złożone animacje i niektóre przypadki graniczne Flexbox mogą być ograniczone.