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="/differences/">Rozdíly</a> </li><li> <a href="/python-os-module-programs/">Python Os-Module-Programy</a> </li><li> <a href="/number-system-maq/">Systém Čísel - Maq</a> </li><li> <a href="/java-new-features/">Nové Funkce Java</a> </li><li> <a href="/hash/">Hash</a> </li><li> <a href="/c-const-keyword/">Klíčové Slovo C++-Const</a> </li><li> <a href="/linux-directories/">Linuxové Adresáře</a> </li><li> <a href="/java-scanner-class/">Třída Skeneru Java</a> </li><li> <a href="/python-math-library/">Matematická Knihovna Pythonu</a> </li><li> <a href="/c-class-object/">C++-Třída A Objekt</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Kruskalův algoritmus minimálního Spanning Tree (MST).</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Minimální kostra pro vážený, souvislý a neorientovaný graf je kostra s váhou menší nebo rovnou hmotnosti každé jiné kostry.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/kruskal-s-minimum-spanning-tree-algorithm"> <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="/divide-conquer-introduction">Rozděl a panuj Úvod</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-design-hashset-python">Jak navrhnout hashset v Pythonu?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/google-workspace/">Google Workspace</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-random-random-function">Python Random – funkce random().</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cpp-functions/">Funkce Cpp</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="/what-is-full-form-supw">supw</a>
</li><li><a href="/spring-boot-jpa">jpa na jaře</a>
</li><li><a href="/php-preg_match-function">preg_match</a>
</li><li><a href="/java-jlist">jlist</a>
</li><li><a href="/how-sort-an-array-java">seřadit pole java</a>
</li><li><a href="/loops-java">pro smyčky java</a>
</li><li><a href="/list-fruits">kolik je tam ovoce</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="//ja.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>