Často spolupracuji nebo jsem spolupracoval s mnoha vydavateli. Ať šlo svého času o Computer Press, Extra Publishing, Jan Melvil Publishing nebo aktuálně o Books & Pipes Publishing. Ale nejenom na jejich webech se čas od času objeví potřeba zveřejnit v PDF ukázku nějaké knihy nebo rovnou celý časopis.
Mnozí určitě znáte takové ty online prohlížečky, ve kterých listujete jednotlivými stránkami, je možné je zvětšit přes celou obrazovku a pohodlně si tak dokument, knihu nebo časopis přečíst. Nejznámější je asi Issuu. Ta však nedávno upravila svoje tarify, a tak vygenerování značky HTML iframe pro vložení prohlížečky PDF do webu je nyní až ve zpoplatněné verzi. Jaké se nabízejí alternativy?
Použijte značku embed
Úplně nejjednodušším způsobem, jak vložit PDF do webu včetně jeho zobrazení, je HTML značka embed. Zápis je následující:
<embed src="soubor.pdf" type="application/pdf" width="100%" height="500px" />
Vzhledem k tomu, že všechny prohlížeče dnes dovedou zobrazovat PDF, tak tímto vytvoříte rámeček ve stránce, ve kterém se prohlížeč PDF zobrazí. Za adresu vedoucí k souboru s dokumentem lze vložit několik hastagů, které ovlivní zobrazení:
- page=10 – libovolné číslo stránky, na kterou se má prohlížeč PDF narolovat při otevření
- chapter=2 – naroluje na danou kapitolu
- zoom=50 – hodnota lupy od 1 do 100, udává procentuální velikost zobrazení dokumentu v prohlížečce
- view=Fit – nastaví velikost zobrazení tak, aby se dokument celý vešel do prohlížečky, jiná hodnota může být fitH, pro zobrazení dle výšky
- scrollbar=0 – vypne skrolovací lištu, jednička ji zapne
- toolbar=0 – vypne nástrojovou lištu, jednička ji zapne
- statusbar=0 – vypne spodní lištu, jednička ji zapne
- navpanes=0 – vypne náhledy stránek v PDF, jednička ji zapne
Jak by tedy takto upravený kód pro vložení PDF mohl vypadat?
<embed src="soubor.pdf#page=7" type="application/pdf" width="100%" height="500px" />
Pro kombinaci více nastavení použijte &:
<embed src="soubor.pdf#page=7&zoom=70" type="application/pdf" width="100%" height="500px" />
Tento zápis by měl fungovat ve všech prohlížečích. Co trochu kazí radost, tak je odlišná implementace v každém z nich. Někdo má ve výchozí podobě zobrazené různé lišty, někdo žádné. Liší se také ikonky. Zkoušel jsem při psaní článku Firefox, Chrome a Safari, vždy se PDF zobrazí v černém rámečku na stránce, ale ten se pak mírně odlišuje. Dá se s tím žít.
Yumpu: alternativa k Issuu
Oblíbené Issuu jsem zmínil. Pokud nechcete své čtenáře odkazovat na něj, ale rádi byste zobrazili podobný prohlížeč přímo na svém webu i s bezplatným tarifem, zkuste se podívat na Yumpu. Nabízí podobný výsledek jako Issuu.
Po přihlášení do služby nahrajete dokument. Nastavíte jeho vlastnosti a popisky, můžete upravit exspiraci, propojení na iTunes a Google Play. Statistiky zobrazení lze sledovat přes Google Analytics. Vkládací kód lze mírně upravit. Výsledek vidíte třeba u knihy F.T.M. Futurismus.
Je to však něco za něco. Bezplatná verze momentálně nabízí jen tři PDF, která lze vložit. Nicméně neomezuje je v možnosti zobrazení na webu spolu se čtečkou. Zmíněné statistiky jsou až v placené verzi.
Prohlížečka Dokumentů Google
Kdysi dávno jsem pro zobrazení dokumentů na webu používal Google Docs. Funguje to dodnes, nevýhodou je absence nějakého uživatelského rozhraní takové prohlížečky. Zobrazí zkrátka jen rámeček s dokumentem.
Jak na to? Otevřete si dokument v online rozhraní Google Docs a přejděte do nabídky Soubor > Publikování na webu. Zobrazí se dialog, ve kterém se přepněte na volbu Vložit a následně klepněte na tlačítko Publikovat. Tím získáte kód značky HTML iframe, který vložíte do webu.
Google Docs můžete využít i pro případ, že potřebujete zobrazit prohlížeč PDF z jiného zdroje na https stránce, avšak onen zdroj je jenom na http. Pak by vám klasické vložení přes embed a vestavěný prohlížeč PDF nefungovalo. Stačí však použít následujícím způsobem upravený iframe:
<iframe frameborder="0" height="240" src="htt p://.../soubor.pdf&embedded=true" style="width: 650px; height: 800px;"></iframe>
Slideshare
Poslední z možností, jak zobrazit PDF v trochu jiné podobě, než nabízí zabudované čtečky ve webových prohlížečích, je použít službu SlideShare. Já vím, sdílejí se tu spíše prezentace z přednášek, ale PDF to dovede importovat též.
Vygenerovaný HTML iframe zobrazí černý rámeček s posouváním jednotlivých stránek dokumentu ze strany na stranu. Není to doprovázeno žádným listovacím efektem jako u Issuu nebo Yumpu, ale je to zdarma a řekl bych i lepší, než výchozí PDF rolované vertikálním směrem.
Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.
Podobné články
Komentáře k článku
Taková "drobnost", nefunguje to na Androidu, nebo dělám něco špatně.
Dobrý den,
moc děkuji za tip na Yumpu, Věděl jsem pouze o Issuu, které přidání na web už mají pouze v placené verzi.
Hezký den
Jan Šarman