Bez przesyłania, 100% lokalnie, bez konta

HTML do PDF

Wklej HTML, wybierz rozmiar strony i pobierz PDF, wszystko renderuje się w przeglądarce.

Jak działa HTML do PDF

HTML na PDF pobiera znaczniki HTML wklejone do edytora, oczyszcza je za pomocą DOMPurify, aby usunąć skrypty i niebezpieczne atrybuty, renderuje na pozaekranowym płótnie za pomocą html2canvas, i koduje wynik do PDF za pomocą jsPDF. Cały potok działa wewnątrz karty przeglądarki; żaden kod HTML ani wyrenderowane wyjście nie są przesyłane na żaden serwer. Sprawia to, że narzędzie nadaje się do konwertowania fragmentów HTML zawierających dane osobowe, których nie chcesz wklejać do usługi online.

Ważne jest zrozumienie formatu wyjścia przed poleganiem na nim. Strony PDF to obrazy rastrowe, a nie tekst wektorowy. Tekst w wyjściu nie jest możliwy do zaznaczenia, przeszukiwania ani ponownego formatowania. Zewnętrzne zasoby, takie jak obrazy odniesione przez URL, są blokowane przez zasadę CORS przeglądarki i nie załadują się. Wbudowane style i osadzony CSS działają, ale złożone układy z niestandardowymi czcionkami internetowymi lub zaawansowanym CSS Grid mogą nie renderować się dokładnie. Do wiernej dokumentowi konwersji pełnych stron internetowych, bardziej odpowiednim narzędziem jest bezgłowa przeglądarka działająca po stronie serwera.

Napisał Bastien Sulyan

HTML do PDF: instrukcja krok po kroku

  1. Wklej znaczniki HTML do obszaru edytora.
  2. Opcjonalnie dostosuj rozmiar strony (A4 lub Letter) i orientację.
  3. Kliknij konwertuj; DOMPurify oczyszcza HTML, a html2canvas go renderuje.
  4. Poczekaj, aż jsPDF zakoduje wyjście płótna jako strony PDF.
  5. Pobierz PDF.

Typowe zastosowania

  • Wygenerowałeś fakturę HTML w przeglądarce z lokalnego szablonu i chcesz kopię PDF bez wysyłania jej do usługi konwersji.
  • Prosty raport HTML zbudowany z danych API wymaga zapisania jako PDF do archiwizacji; wklej HTML i konwertuj lokalnie.
  • Napisałeś stylizowany szablon wiadomości e-mail HTML i chcesz podejrzeć, jak by wyglądał wydrukowany jako PDF.
  • Deweloper potrzebuje szybkiego PDF z fragmentu HTML podczas testowania, bez konfigurowania bezgłowej przeglądarki po stronie serwera.

Często zadawane pytania

Dlaczego tekst w wyjściowym PDF nie jest możliwy do zaznaczenia?

Potok konwersji renderuje HTML do bitmapy płótna za pomocą html2canvas, a następnie koduje tę bitmapę jako dane obrazu wewnątrz stron PDF za pomocą jsPDF. Wynik to zrastrowany obraz, a nie warstwa tekstowa. Jeśli potrzebujesz PDF z możliwym do zaznaczenia tekstem, potrzebujesz bezgłowej przeglądarki po stronie serwera, takiej jak Puppeteer, czego to narzędzie celowo unika, aby utrzymać przetwarzanie lokalnym.

Dlaczego obrazy w moim HTML nie pojawiają się w PDF?

Obrazy ładowane z zewnętrznych URL podlegają zasadzie CORS przeglądarki. Jeśli serwer obrazów nie wysyła permisywnych nagłówków CORS, html2canvas nie może odczytać danych pikselowych i miejsce obrazu renderuje się jako puste. Obrazy zakodowane inline base64 osadzone bezpośrednio w HTML lub obrazy z tego samego źródła działają bez tego ograniczenia.

Czy wklejony przeze mnie HTML jest wysyłany na serwer?

Nie. HTML pozostaje w pamięci przeglądarki przez cały czas. DOMPurify oczyszcza go po stronie klienta, html2canvas renderuje go po stronie klienta, a jsPDF koduje PDF po stronie klienta. Nic nie opuszcza karty przeglądarki.

Co usuwa oczyszczanie DOMPurify?

DOMPurify usuwa tagi skryptów, atrybuty obsługi zdarzeń takie jak onclick i onload, URL-e javascript: i inne konstrukcje, które mogłyby wykonywać kod. Zachowuje znaczniki strukturalne i stylizacyjne, więc wyrenderowane wyjście wygląda tak samo, ale jest bezpieczne do wstawienia w kontekście dokumentu.

Czy mogę konwertować pełny URL strony internetowej zamiast wklejać HTML?

Nie. Narzędzie działa ze znacznikami HTML wklejanymi bezpośrednio. Ładowanie URL wymagałoby pobierania strony, co napotyka ograniczenia CORS dla większości witryn i wiązałoby się z zadaniem sieciowym, które przenosi operację poza model lokalnego przetwarzania.

Powiązane narzędzia

Utrzymuj wszystko lokalnie, odkrywaj narzędzia uzupełniające.

Wszystkie narzędzia PDF