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> <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>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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />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><!--//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="/chatgpt/">Chatgpt</a> </li><li> <a href="/java-generics/">Java-Generika</a> </li><li> <a href="/tutorials/">Tutorials</a> </li><li> <a href="/github/">Github</a> </li><li> <a href="/prime-number/">Primzahl</a> </li><li> <a href="/sorting/">Sortierung</a> </li><li> <a href="/pandas-tutorial/">Pandas-Tutorial</a> </li><li> <a href="/c-functions/">C-Funktionen</a> </li><li> <a href="/genetics/">Genetik</a> </li><li> <a href="/html-dom/">Html-Dom</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Wie viele Nanometer hat ein Meter?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Versuchen Sie, von nm oder m umzurechnen? Es kann schwierig sein, da Nanometer so klein sind. Einzelheiten zur Umrechnung von Nanometern in Meter finden Sie hier.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-many-nanometers-meter-131194"> <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="/sql-cast-function">SQL CAST-Funktion</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/software-testing/">Softwaretest</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-string-replaceall">Java-String replaceAll()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-install-eclipse-macos">So installieren Sie Eclipse unter MacOS</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-confirm">JavaScript bestätigen</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="/what-is-10-60">10 Prozent von 60</a>
</li><li><a href="/java-string-replaceall">Java-String ersetzen</a>
</li><li><a href="/java-logo">Java-Logo</a>
</li><li><a href="/what-is-an-expert-system">Expertensysteme</a>
</li><li><a href="/java-string-date">Konverter-String bis heute</a>
</li><li><a href="/java-arrays">Arrays 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 Alle Rechte Vorbehalten | <a href="//pt.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>
</body>
</html>