Wir werden lernen wie man PDF-Dateien in HTML-Dokumente einbettet , zusammen mit der Kenntnis ihrer Umsetzung anhand von Beispielen. Manchmal möchten Sie möglicherweise eine PDF-Datei in ein HTML-Dokument oder einen HTML-Code einfügen, um den Inhalt interaktiver zu gestalten. Da die Formate so unterschiedlich sind, ist es nicht einfach, die Aufgabe zu erfüllen.
Dies sind die folgenden Methoden, um dies zu erreichen:
Inhaltsverzeichnis
Methode 1: Verwenden Objekt-Tag
- Das Objekt-Tag von HTML ist die erste Möglichkeit, PDF-Dateien einzubetten. Im folgenden Beispiel wird die PDF-Datei auf einer Webseite angezeigt, bei der es sich um ein Objekt handelt.
- Neben der Einbettung einer PDF-Datei in eine Webseite kann das Objekt-Tag auch ActiveX-, Flash-, Video-, Audio- und Java-Applets einbetten.
- Interaktive Dokumente können an ein mit einem HTML-Tag eingebettetes Objekt angehängt werden.
- Mithilfe der Höhen- und Breitenattribute des Objekts kann es je nach Bedarf auf dem Bildschirm angezeigt werden.
Beispiel 1 : Dieses Beispiel beschreibt die Einbettung einer PDF-Datei in HTML mithilfe des Object-Tags.
HTML PDF im HTML-Titel>Kopf><style>.pdf { Breite: 100 %; Seitenverhältnis: 4 / 3; } .pdf, html, body { height: 100%; Rand: 0; Polsterung: 0; } h1, h3 { text-align: center; } h1 { Farbe: grün; } Stil> <body> <h1>techcodeview.comh1><h3>Einbetten der PDF-Datei mit Object Tagh3><object>Objekt> Körper> HTML>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</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>Methode 2: Verwenden eines</strong> </b> <a href='/html-iframes' rel=''> <b> <strong>iframe</strong> </b> </a> </h2><ul><li value='1'><span>Die Verwendung eines Iframe-Tags ist die zweite Möglichkeit, eine PDF-Datei in eine HTML-Webseite einzubetten. In der Webentwicklung verwenden Webentwickler das Iframe-Tag, um Dateien in verschiedenen Formaten und sogar andere Websites in eine Webseite einzubetten.</span></li><li value='2'><span>Aufgrund seiner umfassenden Kompatibilität wird das Iframe-Tag häufig zum Einbetten von PDFs verwendet.</span></li><li value='3'><span>Ein Browser, der keine PDF-Dokumente oder das Objekt-Tag unterstützt, kann dieses Tag auch zum Einbetten eines PDF-HTML-Codes verwenden.</span></li></ul><p dir='ltr'> <b> <strong>Beispiel 2</strong> </b> <span>: Dieses Beispiel beschreibt die Einbettung einer PDF-Datei in HTML mithilfe eines Iframes.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>PDF im HTML-Titel>Kopf><style>.pdf { Breite: 100 %; Seitenverhältnis: 4 / 3; } .pdf, html, body { height: 100%; Rand: 0; Polsterung: 0; } h1, h3 { text-align: center; } h1 { Farbe: grün; } Stil> <body> <h1>techcodeview.comh1><h3>Einbetten der PDF-Datei mit Iframe Tagh3> <iframe>iframe> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</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>Methode 3: Verwenden</strong> </b> <b> <strong>Tag einbetten</strong> </b> </h2><ul><li value='1'><span>Beim Einbetten eines PDF-HTML-Codes in eine Website wird das Embed-Tag nicht so oft verwendet wie die vorherigen Tags, da die Anzeige leer ist, wenn der Browser des Benutzers keine PDF-Dateien verarbeiten kann.</span></li><li value='2'><span>Die Methode zum Einbetten eines PDF-HTML-Codes wird verwendet, wenn kein Fallback-Inhalt bereitgestellt werden muss.</span></li></ul><p dir='ltr'> <b> <strong>Beispiel</strong> </b> <span>: Dieses Beispiel beschreibt die Einbettung einer PDF-Datei in HTML mithilfe des Embed-Tags.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>PDF im HTML-Titel>Kopf><style>.pdf { Breite: 100 %; Seitenverhältnis: 4 / 3; } .pdf, html, body { height: 100%; Rand: 0; Polsterung: 0; } h1, h3 { text-align: center; } h1 { Farbe: grün; } Stil> <body> <h1>techcodeview.comh1><h3>Einbetten der PDF-Datei mit Embed Tagh3> <embed>body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</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="//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="">Kategorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/data-link-layer/">Datenübertragungsebene</a> </li><li> <a href="/opencv/">Opencv</a> </li><li> <a href="/physics-class-9-cat/">Physik-Klasse-9</a> </li><li> <a href="/data-structures-hash/">Datenstrukturen-Hash</a> </li><li> <a href="/gmail-questions/">Fragen Zu Gmail</a> </li><li> <a href="/csharp-keyword/">Csharp-Schlüsselwort</a> </li><li> <a href="/gcd-lcm/">Gcd-Lcm</a> </li><li> <a href="/python-turtle-programming/">Python-Turtle-Programmierung</a> </li><li> <a href="/dbms-relational-algebra/">Dbms-Relationale Algebra</a> </li><li> <a href="/windows-errors/">Windows-Fehler</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">Shraddha Kapoor</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Shraddha Kapoor: Biografie, Alter mit Mutter Teresa, Narendra Modi, Mahatma Gandhi, Amitabh Bachchan, Humayun, Mangal Pandey Biografie usw.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/shraddha-kapoor"> <i class="fa fa-external-link"></i> Weiterlesen</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikel</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/nominal-vs-ordinal-data">Nominale vs. ordinale Daten</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cryptography-its-types">Kryptographie und ihre Typen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-program-check-prime-number">Python-Programm zur Überprüfung von Primzahlen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linux-basic-commands/">Linux-Basisbefehle</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/change-column-name-given-dataframe-r">Ändern Sie den Spaltennamen eines bestimmten DataFrame in R</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">Beliebte Beiträge</h2>
<div class="content">
<ul class="list"> <li><a href="/abstract-method-java">abstrakte Methoden</a>
</li><li><a href="/mysql-insert-statement">MySQL einfügen in</a>
</li><li><a href="/bash-if">bash wenn Bedingung</a>
</li><li><a href="/how-find-out-my-monitor-size">So überprüfen Sie die Bildschirmgröße des Monitors</a>
</li><li><a href="/how-find-hidden-apps-android">Versteckte Apps anzeigen</a>
</li><li><a href="/what-is-internet">Was ist das Internet</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 Alle Rechte Vorbehalten | <a href="//ar.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Haftungsausschluss</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Über Uns</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Datenschutzrichtlinie</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>