Jak zdarma vložit PDF do webové stránky? Hned několika způsoby

Chtěli byste na svém webu vystavit PDF v podobě rovnou ke čtení? Tedy nikoli jako odkaz pro stažení či otevření v novém okně, ale rovnou s prohlížečkou? Je několik možností, ta základní navíc nevyžaduje použití žádné třetí strany.

Č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.

Vložení PDF do stránky

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.

PDF zobrazené pomocí Yumpu

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.

Vložení dokumentu z Google Docs

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&amp;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.

Tagy

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

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.

Komentáře k článku

návštěvník

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

návštěvník

Taková "drobnost", nefunguje to na Androidu, nebo dělám něco špatně.

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru