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 aktorHTML
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> <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>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 class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.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="">Kategoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/quick-sort/">Szybkie Sortowanie</a> </li><li> <a href="/next-js/">Następny.js</a> </li><li> <a href="/python-turtle/">Żółw Pytonowy</a> </li><li> <a href="/php-tutorial/">Samouczek Php</a> </li><li> <a href="/algebra-maq/">Algebra - Maq</a> </li><li> <a href="/command-prompt/">Wiersz Polecenia</a> </li><li> <a href="/linux-unix-tools/">Narzędzia Dla Linuksa I Uniksa</a> </li><li> <a href="/google-workspace/">Google Workspace</a> </li><li> <a href="/cpp-vector/">Wektor Cpp</a> </li><li> <a href="/dfs/">Dfs</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="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Treść tekstowa w JavaScript</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Treść tekstowa w JavaScript z samouczkiem JavaScript, wprowadzeniem, ups JavaScript, zastosowaniem JavaScript, pętlą, zmienną, obiektami, mapą, typedarray itp.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/textcontent-javascript"> <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="/spring-boot-tutorial">Samouczek dotyczący rozruchu wiosennego</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/gcd-and-fibonacci-numbers">GCD i liczby Fibonacciego</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/intrusion-detection-system">System wykrywania włamań (IDS)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/global-local-variables-python">Zmienne globalne i lokalne w Pythonie</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/dbms/">Dbm</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="/first-order-logic-artificial-intelligence">Logika pierwszego rzędu</a>
</li><li><a href="/rekha">rekha indyjski</a>
</li><li><a href="/synchronization-java">synchronizacja wątków</a>
</li><li><a href="/what-is-username">nazwa użytkownika</a>
</li><li><a href="/java-convert-string-int">str do int</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="//iw.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>
<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>