Budeme se učit jak vložit soubory PDF do dokumentů HTML , spolu se znalostí jejich implementace prostřednictvím příkladů. Někdy můžete chtít vložit soubor PDF do dokumentu nebo kódu HTML, aby byl obsah interaktivnější. Protože jsou formáty tak odlišné, není snadné úkol splnit.
K tomu slouží následující metody:
Obsah
Metoda 1: Použití Značka objektu
- HTML tag object je první způsob, jak vložit soubory PDF. V níže uvedeném příkladu se soubor pdf zobrazí na webové stránce, což je objekt.
- Kromě vložení souboru PDF do webové stránky může tag object vložit aplety ActiveX, Flash, video, zvuk a Java.
- Interaktivní dokumenty lze připojit k objektu vloženému pomocí značky HTML.
- Lze jej zobrazit podle potřeby na obrazovce pomocí atributů výška a šířka objektu.
Příklad 1 : Tento příklad popisuje vložení souboru PDF do HTML pomocí Object Tag.
globální var v jsHTML
PDF v HTMLtitle> head><style>.pdf { šířka: 100 %; poměr stran: 4/3; } .pdf, html, tělo { výška: 100 %; okraj: 0; výplň: 0; } h1, h3 { text-align: center; } h1 { barva: zelená; } styl> <body> <h1>techcodeview.comh1><h3>Vložení souboru PDF pomocí Object Tagh3><object>objekt> tělo> html>></pre> </code> <p dir='ltr'> <b> <strong>Výstup:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <img src='//techcodeview.com/img/geeks-premier-league-2022/50/how-embed-pdf-file-using-html.webp' alt=""><h2 id='method-2-using-an-iframe'> <b> <strong>Metoda 2: Použití an</strong> </b> <a href='/html-iframes' rel=''> <b> <strong>iframe</strong> </b> </a> </h2><ul><li value='1'><span>Použití značky iframe je druhý způsob, jak vložit soubor PDF na webovou stránku HTML. Při vývoji webu používají weboví vývojáři značku iframe k vkládání souborů v různých formátech a dokonce i jiných webových stránek na webovou stránku.</span></li><li value='2'><span>Vzhledem ke své široké kompatibilitě je značka iframe široce používána pro vkládání pdf.</span></li><li value='3'><span>Prohlížeč, který nepodporuje dokumenty PDF nebo tag object, může také použít tento tag k vložení HTML kódu PDF.</span></li></ul><p dir='ltr'> <b> <strong>Příklad 2</strong> </b> <span>: Tento příklad popisuje vložení souboru PDF do HTML pomocí prvku iframe.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/javascript-print-method">javascriptový tisk</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>PDF v HTMLtitle> head><style>.pdf { šířka: 100 %; poměr stran: 4/3; } .pdf, html, tělo { výška: 100 %; okraj: 0; výplň: 0; } h1, h3 { text-align: center; } h1 { barva: zelená; } styl> <body> <h1>techcodeview.comh1><h3>Vložení souboru PDF pomocí iframe Tagh3> <iframe>iframe> tělo> html>></pre> </code> <p dir='ltr'> <b> <strong>Výstup:</strong> </b> </p> <img src='//techcodeview.com/img/geeks-premier-league-2022/50/how-embed-pdf-file-using-html.webp' alt=""><h2 id='method-3-using-embed-tag'> <b> <strong>Metoda 3: Použití</strong> </b> <b> <strong>vložit značku</strong> </b> </h2><ul><li value='1'><span>Při vkládání pdf HTML kódu na web se tag embed nepoužívá tak často jako předchozí tagy, protože pokud prohlížeč uživatele nedokáže zpracovat soubory PDF, zobrazení bude prázdné.</span></li><li value='2'><span>Metoda embed a pdf HTML kódu se používá, když není třeba poskytovat žádný záložní obsah.</span></li></ul><p dir='ltr'> <b> <strong>Příklad</strong> </b> <span>: Tento příklad popisuje vložení souboru PDF do HTML pomocí tagu embed.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>PDF v HTMLtitle> head><style>.pdf { šířka: 100 %; poměr stran: 4/3; } .pdf, html, tělo { výška: 100 %; okraj: 0; výplň: 0; } h1, h3 { text-align: center; } h1 { barva: zelená; } styl> <body> <h1>techcodeview.comh1><h3>Vložení souboru PDF Pomocí embed Tagh3> <embed>tělo> html>></pre> </code> <p dir='ltr'> <b> <strong>Výstup:</strong> </b> </p> <img src='//techcodeview.com/img/geeks-premier-league-2022/50/how-embed-pdf-file-using-html.webp' alt=""> <br> <br></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Kategorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/linux-unix-tools/">Linux Unixové Nástroje</a> </li><li> <a href="/java-object-oriented/">Java-Object Oriented</a> </li><li> <a href="/tally-tutorial/">Výukový Program Tally</a> </li><li> <a href="/math-statistics/">Matematika-Statistika</a> </li><li> <a href="/t-sql-tutorial/">Výukový Program T-Sql</a> </li><li> <a href="/commerce-12th/">Obchod - 12</a> </li><li> <a href="/python-loop-programs/">Smyčkové Programy V Pythonu</a> </li><li> <a href="/cpp-friend/">Cpp-Přítel</a> </li><li> <a href="/b-tree/">B-Strom</a> </li><li> <a href="/python-list/">Python-List</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Bash Zkontrolujte, zda je nastavena proměnná</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Bash Zkontrolujte, zda je proměnná nastavena pomocí Bash, Bash Úvod, Bash Scripting, Bash Shell, Historie Bash, Vlastnosti Bash, Oprávnění k souborovému systému a souborů, Relativní vs absolutní cesta, Hello World Bash Script, Bash proměnné, Bash funkce, Bash podmíněné příkazy atd.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/bash-check-if-variable-is-set"> <i class="fa fa-external-link"></i> Čtěte Více</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Zajímavé Články</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/cancer-moon-sign-personality-131310">Měsíční znamení Raka: Osobnost a vztahy</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/chemistry-class-9-cat/">Chemie-Třída-9</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-get-file-size-python">Jak získat velikost souboru v Pythonu?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-create-list-tuples">Python – Vytvořte seznam n-tic</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/numpy-pad-python">numpy.pad() v Pythonu</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Populární Příspěvky</h2>
<div class="content">
<ul class="list"> <li><a href="/pair-c">pár c++</a>
</li><li><a href="/propositional-logic-artificial-intelligence">výroková logika</a>
</li><li><a href="/log4j-tutorial">log4j</a>
</li><li><a href="/string-concatenation-java">řetězec java concat</a>
</li><li><a href="/python-pandas-series">rysy série panda</a>
</li><li><a href="/numpy-pad-python">np polstrování</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Všechna Práva Vyhrazena | <a href="//cs.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vyloučení Odpovědnosti</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nás</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Zásady Ochrany Osobních Údajů</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>