We zullen leren hoe u PDF-bestanden in HTML-documenten kunt insluiten , samen met het kennen van de implementatie ervan aan de hand van voorbeelden. Soms wilt u misschien een PDF-bestand in een HTML-document of -code invoegen om de inhoud interactiever te maken. Omdat de formaten zo verschillend zijn, is het niet eenvoudig om de taak te volbrengen.
wolf versus vos
Dit zijn de volgende methoden om dit te doen:
Inhoudsopgave
Methode 1: Gebruiken Objecttag
- De objecttag van HTML is de eerste manier om PDF-bestanden in te sluiten. In het onderstaande voorbeeld wordt het pdf-bestand weergegeven op een webpagina, wat een object is.
- Naast het insluiten van een PDF-bestand in een webpagina, kan de objecttag ActiveX-, Flash-, video-, audio- en Java-applets insluiten.
- Interactieve documenten kunnen worden gekoppeld aan een object dat is ingesloten met een HTML-tag.
- Het kan naar wens op het scherm worden weergegeven door de hoogte- en breedtekenmerken van het object te gebruiken.
voorbeeld 1 : Dit voorbeeld beschrijft het insluiten van een PDF-bestand in HTML met behulp van de Object Tag.
HTML PDF in HTML-titel> hoofd><style>.pdf { breedte: 100%; beeldverhouding: 4 / 3; } .pdf, html, body {hoogte: 100%; marge: 0; opvulling: 0; } h1, h3 {tekst uitlijnen: centreren; } h1 { kleur: groen; } stijl> <body> <h1>techcodeview.comh1><h3>Het PDF-bestand insluiten met Object Tagh3><object>object> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</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: Met behulp van een</strong> </b> <a href='/html-iframes' rel=''> <b> <strong>iframe</strong> </b> </a> </h2><ul><li value='1'><span>Het gebruik van een iframe-tag is de tweede manier om een pdf-bestand in een HTML-webpagina in te sluiten. Bij webontwikkeling gebruiken webontwikkelaars de iframe-tag om bestanden in verschillende formaten en zelfs andere websites in een webpagina in te sluiten.</span></li><li value='2'><span>Vanwege de brede compatibiliteit wordt de iframe-tag veel gebruikt voor het insluiten van pdf.</span></li><li value='3'><span>Een browser die geen PDF-documenten of de objecttag ondersteunt, kan deze tag ook gebruiken om een pdf-HTML-code in te sluiten.</span></li></ul><p dir='ltr'> <b> <strong>Voorbeeld 2</strong> </b> <span>: Dit voorbeeld beschrijft het insluiten van een PDF-bestand in HTML met behulp van een iframe.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>PDF in HTML-titel> hoofd><style>.pdf { breedte: 100%; beeldverhouding: 4 / 3; } .pdf, html, body {hoogte: 100%; marge: 0; opvulling: 0; } h1, h3 {tekst uitlijnen: centreren; } h1 { kleur: groen; } stijl> <body> <h1>techcodeview.comh1><h3>Het PDF-bestand insluiten met Iframe Tagh3> <iframe>iframe> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/anonymous-function-java">Java-anonieme functie</a>
</blockquote> <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: Gebruiken</strong> </b> <b> <strong>tag insluiten</strong> </b> </h2><ul><li value='1'><span>Bij het insluiten van een pdf-HTML-code in een website wordt de embed-tag niet zo vaak gebruikt als de vorige tags, omdat de weergave leeg zal zijn als de browser van de gebruiker geen PDF-bestanden aankan.</span></li><li value='2'><span>De methode voor het insluiten van een pdf-HTML-code wordt gebruikt als er geen fallback-inhoud hoeft te worden verstrekt.</span></li></ul><p dir='ltr'> <b> <strong>Voorbeeld</strong> </b> <span>: Dit voorbeeld beschrijft het insluiten van een PDF-bestand in HTML met behulp van de embed-tag.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>PDF in HTML-titel> hoofd><style>.pdf { breedte: 100%; beeldverhouding: 4 / 3; } .pdf, html, body { hoogte: 100%; marge: 0; opvulling: 0; } h1, h3 {tekst uitlijnen: centreren; } h1 { kleur: groen; } stijl> <body> <h1>techcodeview.comh1><h3>Het PDF-bestand insluiten met behulp van embed Tagh3> <embed>body>html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/acids-bases-salts/">Zuren, Basen En Zouten</a> </li><li> <a href="/us-gk/">Amerikaanse Gk</a> </li><li> <a href="/cpp-multithreading/">Cpp-Multithreading</a> </li><li> <a href="/python-numpy-io/">Python Numpy-Io</a> </li><li> <a href="/embedded-systems/">Ingebouwde Systemen</a> </li><li> <a href="/c-set-function/">C++ Ingestelde Functie</a> </li><li> <a href="/java-conversion/">Java-Conversie</a> </li><li> <a href="/python-basic-programs/">Python-Basisprogramma's</a> </li><li> <a href="/data-structures-hash/">Gegevensstructuren-Hash</a> </li><li> <a href="/c-const-keyword/">C++-Const-Trefwoord</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Java-hashtabelklasse</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Hashtable in Java wordt gebruikt om waarden op te slaan op basis van de sleutel. Laten we het voorbeeld van de hashtabelklasse in het Java-verzamelingsframework bekijken. Het is gesynchroniseerd...</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/java-hashtable-class"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/acre-square-meters">Acre naar Vierkante meter</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/bluetooth-your-child-24284">Bluetooth en uw kind</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/bash-scripting-case-statement">Bash-scripting – Case-verklaring</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sliding-window-technique">Schuifraamtechniek</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-sql-date">java.sql.Datum</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">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/java-convert-string-int">tring naar int</a>
</li><li><a href="/java-convert-date-string">conversie van datum naar tekenreeks</a>
</li><li><a href="/sunny-deol">zonnige deol-leeftijd</a>
</li><li><a href="/react-table">reageer-tabel</a>
</li><li><a href="/aryan-khan">Arische khan</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 Rechten Voorbehouden | <a href="//sk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</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>