logo

Jak osadzić plik PDF przy użyciu HTML?

Nauczymy się jak osadzać pliki PDF w dokumentach HTML , wraz ze znajomością ich realizacji na przykładach. Czasami możesz chcieć wstawić plik PDF do dokumentu lub kodu HTML, aby zawartość była bardziej interaktywna. Ponieważ formaty są tak różne, wykonanie tego zadania nie jest łatwe.

Oto następujące metody, aby to zrobić:



Spis treści

średnia vs średnia

Metoda 1: Używanie Etykieta obiektu

  • Znacznik obiektu HTML to pierwszy sposób na osadzanie plików PDF. W poniższym przykładzie plik pdf zostanie wyświetlony na stronie internetowej będącej obiektem.
  • Oprócz osadzania pliku PDF na stronie internetowej, znacznik obiektu może osadzać aplety ActiveX, Flash, wideo, audio i Java.
  • Dokumenty interaktywne można dołączać do obiektu osadzonego za pomocą znacznika HTML.
  • Można go wyświetlić w zależności od potrzeb na ekranie, korzystając z atrybutów wysokości i szerokości obiektu.

Przykład 1 : Ten przykład opisuje osadzanie pliku PDF w formacie HTML przy użyciu znacznika obiektu.

Ekta Kapoor aktor
HTML
   PDF w HTMLtitle>head><style>.pdf { szerokość: 100%;  współczynnik proporcji: 4 / 3;  } .pdf, html, body { wysokość: 100%;  margines: 0;  dopełnienie: 0;  } h1, h3 { wyrównanie tekstu: do środka;  } h1 { kolor: zielony;  } styl> <body> <h1>techcodeview.comh1><h3>Osadzanie pliku PDF za pomocą znacznika obiektu3><object>obiekt> treść> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Wyjście:</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: Używanie pliku</strong>  </b>   <a href='/html-iframes' rel=''>  <b>  <strong>iframe</strong>  </b>  </a>  </h2><ul><li value='1'><span>Drugim sposobem osadzenia pliku PDF na stronie internetowej HTML jest użycie znacznika iframe. Podczas tworzenia stron internetowych twórcy stron internetowych używają tagu iframe do osadzania plików w różnych formatach, a nawet innych witryn internetowych na stronie internetowej.</span></li><li value='2'><span>Ze względu na szeroką kompatybilność znacznik iframe jest szeroko stosowany do osadzania plików PDF.</span></li><li value='3'><span>Przeglądarka, która nie obsługuje dokumentów PDF ani znacznika obiektu, może również użyć tego znacznika do osadzenia kodu HTML w formacie PDF.</span></li></ul><p dir='ltr'>  <b>  <strong>Przykład 2</strong>  </b>  <span>: ten przykład opisuje osadzanie pliku PDF w formacie HTML przy użyciu ramki iframe.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>PDF w HTMLtitle>head><style>.pdf { szerokość: 100%;  współczynnik proporcji: 4 / 3;  } .pdf, html, body { wysokość: 100%;  margines: 0;  dopełnienie: 0;  } h1, h3 { wyrównanie tekstu: do środka;  } h1 { kolor: zielony;  } styl> <body> <h1>techcodeview.comh1><h3>Osadzanie pliku PDF za pomocą znacznika Iframe Tag3> <iframe>iframe> treść> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Wyjście:</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: Używanie</strong>  </b>    <b>  <strong>umieść znacznik</strong>  </b>   </h2><ul><li value='1'><span>Podczas osadzania kodu HTML w formacie PDF na stronie internetowej tag embed nie jest używany tak często, jak poprzednie tagi, ponieważ jeśli przeglądarka użytkownika nie obsługuje plików PDF, wyświetlacz będzie pusty.</span></li><li value='2'><span>Metoda osadzania kodu HTML w formacie PDF jest używana, gdy nie ma potrzeby udostępniania treści zastępczej.</span></li></ul><p dir='ltr'>  <b>  <strong>Przykład</strong>  </b>  <span>: Ten przykład opisuje osadzanie pliku PDF w formacie HTML przy użyciu znacznika embed.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>PDF w HTMLtitle>head><style>.pdf { szerokość: 100%;  współczynnik proporcji: 4 / 3;  } .pdf, html, body { wysokość: 100%;  margines: 0;  dopełnienie: 0;  } h1, h3 { wyrównanie tekstu: do środka;  } h1 { kolor: zielony;  } styl> <body> <h1>techcodeview.comh1><h3>Osadzanie pliku PDF za pomocą narzędzia embed Tagh3> <embed>treść>html>></pre> </code> <p dir='ltr'>  <b>  <strong>Wyjście:</strong>  </b>  </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/string-concatenation-java">połączyć ciąg Java</a>
</blockquote>  <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="">Kategoria</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/binary-tree/">Drzewo Binarne</a> </li><li> <a href="/accenture/">Accenture</a> </li><li> <a href="/linux-unix/">Linux-Unix</a> </li><li> <a href="/svn-tutorial/">Poradnik Svn</a> </li><li> <a href="/computer-graphics/">Grafika Komputerowa</a> </li><li> <a href="/cpp-vector/">Wektor Cpp</a> </li><li> <a href="/embedded-systems/">Systemy Wbudowane</a> </li><li> <a href="/kinematics/">Kinematyka</a> </li><li> <a href="/interview-questions/">Pytania Do Wywiadu</a> </li><li> <a href="/python-selenium-exercises/">Python Selenium – Ćwiczenia</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                   <div class="section-inner">
                        <h2 class="heading">Najlepsze prace dla wieśniaków w Minecraft</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Odkryj najlepsze oferty pracy dla wieśniaków w Minecraft! Przeglądaj różne zawody, zawody i korzyści, aby zoptymalizować swoją wioskę i ulepszyć rozgrywkę.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/best-minecraft-villager-jobs"> <i class="fa fa-external-link"></i> Czytaj Więcej</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Ciekawe Artykuły</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/is-yahoo-search-engine">Czy Yahoo jest wyszukiwarką?</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/dsa-blogs/">Blogi Dsa</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/difference-between-insertion-sort">Różnica między sortowaniem przez wstawianie a sortowaniem przez wybór</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/how-insert-graph-chart-word">Jak wstawić wykres/wykres w programie Word</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/linux-gzip">gzip dla Linuksa</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">Popularne Wiadomości</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/sql-composite-key">klucz podstawowy klucz złożony</a>
</li><li><a href="/what-is-computer">zdefiniuj komputer</a>
</li><li><a href="/linux-task-manager">Menedżer zadań dla Linuksa</a>
</li><li><a href="/what-is-is-relationship-java">jest związek</a>
</li><li><a href="/binary-tree-java">drzewo binarne Java</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 Wszelkie Prawa Zastrzeżone |  <a href="//sv.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zastrzeżenie</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nas</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Polityka Prywatności</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>