Nous apprendrons comment intégrer des fichiers PDF dans des documents HTML , tout en connaissant leur mise en œuvre à travers des exemples. Parfois, vous souhaiterez peut-être insérer un fichier PDF dans un document ou un code HTML afin de rendre le contenu plus interactif. Les formats étant si différents, il n’est pas facile d’accomplir cette tâche.
Voici les méthodes suivantes pour ce faire :
Table des matières
bash while boucle
Méthode 1 : Utilisation Balise d'objet
- La balise d'objet HTML est le premier moyen d'incorporer des fichiers PDF. Dans l'exemple ci-dessous, le fichier pdf sera affiché sur une page Web, qui est un objet.
- En plus d'intégrer un fichier PDF dans une page Web, la balise d'objet peut intégrer des applets ActiveX, Flash, vidéo, audio et Java.
- Les documents interactifs peuvent être attachés à un objet incorporé avec une balise HTML.
- Il peut être affiché selon vos besoins sur l’écran en utilisant les attributs de hauteur et de largeur de l’objet.
Exemple 1 : Cet exemple décrit l'intégration d'un fichier PDF en HTML à l'aide de la balise Object.
mise en gras en CSSHTML
PDF en HTMLtitre>tête><style>.pdf { largeur : 100 % ; rapport hauteur/largeur : 4 / 3 ; } .pdf, html, corps { hauteur : 100 % ; marge : 0 ; remplissage : 0 ; } h1, h3 {text-align: center; } h1 { couleur : vert ; }style> <body> <h1>techcodeview.comh1><h3>Incorporer le fichier PDF à l'aide de l'objet Tagh3><object>objet> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</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>Méthode 2 : utiliser un</strong> </b> <a href='/html-iframes' rel=''> <b> <strong>iframe</strong> </b> </a> </h2><ul><li value='1'><span>L'utilisation d'une balise iframe est la deuxième façon d'intégrer un fichier pdf dans une page Web HTML. Dans le développement Web, les développeurs Web utilisent la balise iframe pour intégrer des fichiers dans différents formats et même d'autres sites Web dans une page Web.</span></li><li value='2'><span>En raison de sa large compatibilité, la balise iframe est largement utilisée pour intégrer des fichiers PDF.</span></li><li value='3'><span>Un navigateur qui ne prend pas en charge les documents PDF ou la balise object peut également utiliser cette balise pour intégrer un code HTML pdf.</span></li></ul><p dir='ltr'> <b> <strong>Exemple 2</strong> </b> <span>: Cet exemple décrit l'intégration d'un fichier PDF en HTML à l'aide d'une iframe.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>PDF en HTMLtitre>tête><style>.pdf { largeur : 100 % ; rapport hauteur/largeur : 4 / 3 ; } .pdf, html, corps { hauteur : 100 % ; marge : 0 ; remplissage : 0 ; } h1, h3 {text-align: center; } h1 { couleur : vert ; }style> <body> <h1>techcodeview.comh1><h3>Intégration du fichier PDF à l'aide d'Iframe Tagh3> <iframe>iframe> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</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>Méthode 3 : Utilisation</strong> </b> <b> <strong>intégrer la balise</strong> </b> </h2><ul><li value='1'><span>Lors de l’intégration d’un code HTML pdf dans un site Web, la balise embed n’est pas utilisée aussi souvent que les balises précédentes car si le navigateur de l’utilisateur ne peut pas gérer les fichiers PDF, l’affichage sera vide.</span></li><li value='2'><span>La méthode d'intégration d'un code HTML pdf est utilisée lorsqu'aucun contenu de secours ne doit être fourni.</span></li></ul><p dir='ltr'> <b> <strong>Exemple</strong> </b> <span>: Cet exemple décrit l'intégration d'un fichier PDF en HTML à l'aide de la balise embed.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>PDF en HTMLtitre>tête><style>.pdf { largeur : 100 % ; rapport hauteur/largeur : 4 / 3 ; } .pdf, html, corps { hauteur : 100 % ; marge : 0 ; remplissage : 0 ; } h1, h3 {text-align: center; } h1 { couleur : vert ; }style> <body> <h1>techcodeview.comh1><h3>Intégration du fichier PDF à l'aide de embed Tagh3> <embed>corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-jlist">boîte de liste 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="">Catégorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/best/">Meilleur</a> </li><li> <a href="/dbms-relational-model/">Modèle Relationnel De Sgbd</a> </li><li> <a href="/linux-unix/">Linux-Unix</a> </li><li> <a href="/euler-circuit/">Circuit D'euler</a> </li><li> <a href="/cpp-multithreading/">Cpp-Multithreading</a> </li><li> <a href="/java-instant-class/">Classe Instantanée Java</a> </li><li> <a href="/inorder-traversal/">Traversée Dans L'ordre</a> </li><li> <a href="/algebra-maq/">Algèbre - Maq</a> </li><li> <a href="/r-tutorial/">Tutoriel R</a> </li><li> <a href="/object-oriented-design/">Conception Orientée Objet</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">Méthode Java Math.random()</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Méthode Java Math.random() avec exemples sur abs(), min(), max(), avg(), round(), ceil(), floor(), pow(), sqrt(), sin(), cos(), tan(), exp() etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/java-math-random-method"> <i class="fa fa-external-link"></i> Lire La Suite</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Des Articles Intéressants</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/tree-traversal-inorder">Traversée d'arbres (dans l'ordre, précommander et post-commander)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/d-flip-flop">D Bascule</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/trigonometric-identities">Identités trigonométriques</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/zeenat-aman">Zeenat Aman</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-100-km-h-mph">Qu'est-ce que 100 km/h en mph ?</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">Articles Populaires</h2>
<div class="content">
<ul class="list"> <li><a href="/java-instanceof">instance Java de</a>
</li><li><a href="/inheritance-java">héritage en Java</a>
</li><li><a href="/how-open-file-java">java ouvrir un fichier</a>
</li><li><a href="/alphabet-numbers">'abc' est en chiffres'</a>
</li><li><a href="/c-bitwise-xor-operator">xor c++</a>
</li><li><a href="/agents-artificial-intelligence">intelligence artificielle et agents intelligents</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 Tous Les Droits Sont Réservés | <a href="//de.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité</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>