logo

Comment intégrer un fichier PDF en utilisant HTML ?

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 CSS
HTML
   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> <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>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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />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><!--//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="/windows-10-tricks/">Astuces Windows 10</a> </li><li> <a href="/jackson-tutorial/">Tutoriel Jackson</a> </li><li> <a href="/mensuration-3d/">Mensuration 3D</a> </li><li> <a href="/google/">Google</a> </li><li> <a href="/backtracking/">Retour en arrière</a> </li><li> <a href="/groovy-tutorial/">Tutoriel Groovy</a> </li><li> <a href="/http-headers/">En-Têtes Http</a> </li><li> <a href="/c-macro-preprocessor/">C-Macro Et Préprocesseur</a> </li><li> <a href="/geeks-premier-league-2023-cat/">Geeks Premier League 2023</a> </li><li> <a href="/product-management-qna/">Gestion Des Produits Qna</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                   <div class="section-inner">
                        <h2 class="heading">Instruction SQL SELECT INTO</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Un portail informatique pour les geeks. Il contient des articles sur l'informatique et la programmation bien écrits, bien pensés et bien expliqués, des quiz et des questions pratiques/de programmation compétitive/d'entretien d'entreprise.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/sql-select-into-statement"> <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="/cin-ignore-function-c">Fonction Cin.ignore() en C++</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/difference-between-ubuntu">Différence entre Ubuntu et Ubuntu</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/difference-between-coat">Différence entre manteau et blazer</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/what-is-css-grid">Qu'est-ce qu'une grille CSS ?</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/rsa-encryption-algorithm">Algorithme de chiffrement RSA</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="/mamta-kulkarni">Mamta Kulkarni acteur</a>
</li><li><a href="/c-string-compare">string.comparer c#</a>
</li><li><a href="/sed-command-linux-unix-with-examples">commande sed</a>
</li><li><a href="/java-naming-convention">dénomination des conventions Java</a>
</li><li><a href="/adjacent-angles-definition">angles adjacents</a>
</li><li><a href="/arp-commands">commande arp</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="//pl.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>
	
</body>
</html>