Jak jsem převedl HTML prezentaci na PDF
Klient potřeboval převést interaktivní HTML prezentaci (14 slidů) na profesionální PDF dokument, kde každý slide představuje jednu stránku. Prezentace používala JavaScript na navigaci mezi slidy, což komplikovalo standardní konverzní nástroje.
Cílem bylo vytvořit automatizované řešení, které zachová vizuální kvalitu, správně renderuje všechny slidy a produkuje PDF vhodné na distribuci.
Problém, který jsem řešil
Převod interaktivní HTML prezentace (14 slidů s JavaScript navigací) na PDF dokument, kde každý slide = jedna PDF stránka. Prezentace používala CSS transformace pro slide show efekt, což vyžadovalo dynamické nastavení pozice každého slidu před generováním PDF.
Klíčové požadavky: zachování formátování, skrytí UI prvků (navigace, progress bar) a landscape orientace pro prezentaci.
Jak jsem ho vyřešil
Rozhodl jsem se pro Python řešení s Playwright, protože dokáže renderovat JavaScript a poskytuje kontrolu nad procesem generování PDF. Navrhl jsem strukturu skriptu s asynchronním přístupem, použil Playwright pro headless browser rendering a PyPDF2 pro slučování jednotlivých stránek.
Implementoval jsem iteraci přes všechny slidy, dynamické nastavení pozice pomocí JavaScriptu a automatické skrývání navigačních prvků. Opravil jsem JavaScript scope chybu – proměnná `i` nebyla správně předána do evaluate funkce.
Výsledek: úspěšně vytvořený PDF dokument s 14 stránkami (1.8 MB), kde každý slide je přesně jedna stránka v landscape orientaci. Všechny vizuální prvky jsou zachované, navigační prvky jsou skryté a dokument je připravený na distribuci. Čas generování: ~30 sekund pro 14 slidů.
Jak to funguje v praxi
Proces je plně automatizovaný – jediným příkazem `python3 html_to_pdf.py` se vygeneruje finální PDF. Skript je opakovaně použitelný pro další HTML prezentace s podobnou strukturou.
Playwright je ideální nástroj pro komplexní HTML→PDF konverze. Na rozdíl od jednodušších nástrojů dokáže renderovat JavaScript, což je kritické pro moderní webové prezentace. Asynchronní přístup umožňuje efektivní iterování přes slidy a dynamické manipulování s DOM.
Co jsem se naučil
JavaScript scope v Python f-strings vyžaduje opatrnost. Při vkládání Python proměnných do JavaScript kódu přes `page.evaluate()` je lepší použít přímé vložení hodnoty místo pokusu o template string, což může vést k ReferenceError.
Kombinace dočasných souborů a slučování je efektivnější než renderování celého dokumentu najednou. Generování jednotlivých PDF stránek a jejich následné slučování poskytuje lepší kontrolu nad každým slidem.
Headless browser rendering zabezpečuje konzistentní výstup. Použití Chromium přes Playwright garantuje, že PDF bude vypadat stejně jako v reálném prohlížeči, včetně správného renderování fontů, CSS a JavaScript animací.
Proč to stojí za to
Když máš HTML prezentaci s JavaScriptem a chceš ji převést na PDF, nemusíš to dělat manuálně. Můžeš použít Playwright na automatické generování PDF s plnou podporou JavaScriptu.
HTML→PDF konverze je teď součástí mého workflow. Šetří mi čas, protože nemusím manuálně exportovat každý slide. A zároveň mám kontrolu nad tím, jak PDF vypadá, protože všechno je v Python skriptu.
Pokud máš podobný problém – HTML prezentace s JavaScriptem – zkus to. Možná zjistíš, že je to jednodušší, než sis myslel.
Časté otázky
Proč nestačí běžné nástroje na HTML→PDF konverzi?
Běžné nástroje nezvládají JavaScript. Když máš prezentaci s 14 slidy, které se přepínají pomocí JS navigace a CSS transformací, standardní konvertor ti vygeneruje jednu stránku s rozbitým layoutem. Playwright renderuje JavaScript stejně jako prohlížeč – proto funguje.
Jak dlouho trvá generování PDF z HTML prezentace?
Pro 14 slidů ~30 sekund. Skript iteruje přes každý slide, nastaví jeho pozici pomocí JavaScriptu, vygeneruje dočasné PDF a na konci všechno sloučí do jednoho dokumentu. Výsledek: 1.8 MB PDF v landscape orientaci.
Můžu skript použít pro jiné HTML prezentace?
Ano, skript je opakovaně použitelný. Pokud má tvoje prezentace podobnou strukturu (slidy s CSS transformacemi, JS navigace), stačí upravit selektory pro navigační prvky a počet slidů. Jeden příkaz `python3 html_to_pdf.py` a máš hotovo.
Na co si dát pozor při předávání proměnných do page.evaluate()?
JavaScript scope v Python f-strings je zrádný. Když chceš předat Python proměnnou do `page.evaluate()`, vlož hodnotu přímo místo template stringu. Jinak dostaneš ReferenceError – proměnná v JS kontextu neexistuje.
Proč generovat jednotlivé stránky a pak je slučovat?
Lepší kontrola. Každý slide se renderuje samostatně, takže můžeš nastavit přesnou pozici, skrýt navigační prvky a garantovat landscape orientaci. PyPDF2 pak všechno sloučí do finálního dokumentu. Renderování celého dokumentu najednou tohle neumožňuje.
Tom