logo

Jak vložit soubor PDF pomocí HTML?

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 js
HTML
   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>  <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>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 class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="/c-misc/">C-Misc</a> </li><li> <a href="/r-machine-learning/">R Strojové Učení</a> </li><li> <a href="/c-loops-control-statements/">C-Smyčky A Kontrolní Příkazy</a> </li><li> <a href="/accolite/">Akolyta</a> </li><li> <a href="/dbms-relational-model/">Dbms-Relační Model</a> </li><li> <a href="/java-throwable-class/">Java Throwable Třída</a> </li><li> <a href="/ascii/">Ascii</a> </li><li> <a href="/python-random/">Python-Náhodný</a> </li><li> <a href="/binary-representation/">Binární Reprezentace</a> </li><li> <a href="/google-docs-tips/">Tipy Pro Dokumenty Google</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                	 <div class="section-inner">
                        <div class="content">
                            <div class="item">
  								<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>                                                   
                            </div>
                        </div>
                    </div>
                   <div class="section-inner">
                        <h2 class="heading">Seznam amerických společností v Číně</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Některé americké společnosti s velkou zákaznickou základnou v Číně jsou Apple, General Motors, Nike, Walmart, Microsoft, KFC, Starbucks, Adidas a Coca-Cola.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/list-american-companies-china"> <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="/hashset-c-with-examples">HashSet v C# s příklady</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/what-is-flapper-glamorous-history-women-1920s-131844">Co je to klapka? Okouzlující historie žen ve 20. letech 20. století</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/while-loop-c">zatímco smyčka v C</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/difference-between-first-name">Rozdíl mezi křestním jménem a příjmením</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/global-variables-c">Globální proměnné v C</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-transmission-media">mediální přenos</a>
</li><li><a href="/ranbir-kapoor">herec ranbir kapoor věk</a>
</li><li><a href="/java-oops-concepts">Jejda koncept v Javě</a>
</li><li><a href="/gimp-save-image-jpeg">gimp uložit jako jpeg</a>
</li><li><a href="/how-sort-dictionary-python">python sort dictionary</a>
</li><li><a href="/structure">struktura v datové struktuře</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="//pl.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>
	<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
        #toTopBtn {
            position: fixed;
            bottom: 25px;
            right: 25px;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            background-color: #213141;
            color: white;
            border: none;
            border-radius: 8px;
            width: 50px;
            height: 50px;
            font-size: 24px;
            cursor: pointer;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }
        #toTopBtn:hover {
            background-color: #555;
        }
    `,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>