Aprendrem com incrustar fitxers PDF en documents HTML , a més de conèixer la seva implementació mitjançant exemples. De vegades, és possible que vulgueu inserir un fitxer PDF en un document o codi HTML per fer que el contingut sigui més interactiu. Com que els formats són tan diferents, no és fàcil fer la tasca.
Aquests són els mètodes següents per fer-ho:
Taula de contingut
Mètode 1: Ús Etiqueta d'objecte
- L'etiqueta d'objecte d'HTML és la primera manera d'incrustar fitxers PDF. A l'exemple següent, el fitxer pdf es mostrarà en una pàgina web, que és un objecte.
- A més d'incrustar un fitxer PDF a una pàgina web, l'etiqueta d'objecte pot incrustar miniaplicacions ActiveX, Flash, vídeo, àudio i Java.
- Els documents interactius es poden adjuntar a un objecte incrustat amb una etiqueta HTML.
- Es pot mostrar segons les vostres necessitats a la pantalla utilitzant els atributs d'alçada i amplada de l'objecte.
Exemple 1 : Aquest exemple descriu la incrustació d'un fitxer PDF en HTML mitjançant l'etiqueta d'objecte.
HTML PDF a HTMLtitle> cap><style>.pdf { amplada: 100%; relació d'aspecte: 4/3; } .pdf, html, cos { alçada: 100%; marge: 0; farciment: 0; } h1, h3 { text-align: center; } h1 { color: verd; } estil> <body> <h1>techcodeview.comh1><h3>Inserció del fitxer PDF mitjançant Object Tagh3><object>objecte> cos> html>>></pre> </code> <p dir='ltr'> <b> <strong>Sortida:</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ètode 2: utilitzant un</strong> </b> <a href='/html-iframes' rel=''> <b> <strong>iframe</strong> </b> </a> </h2><ul><li value='1'><span>L'ús d'una etiqueta iframe és la segona manera d'incrustar un fitxer pdf en una pàgina web HTML. En el desenvolupament web, els desenvolupadors web utilitzen l'etiqueta iframe per incrustar fitxers en diversos formats i fins i tot altres llocs web dins d'una pàgina web.</span></li><li value='2'><span>A causa de la seva àmplia compatibilitat, l'etiqueta iframe s'utilitza àmpliament per incrustar pdf.</span></li><li value='3'><span>Un navegador que no admet documents PDF o l'etiqueta d'objecte també pot utilitzar aquesta etiqueta per incrustar un codi HTML PDF.</span></li></ul><p dir='ltr'> <b> <strong>Exemple 2</strong> </b> <span>: Aquest exemple descriu la incrustació d'un fitxer PDF en HTML mitjançant un iframe.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>PDF a HTMLtitle> cap><style>.pdf { amplada: 100%; relació d'aspecte: 4/3; } .pdf, html, cos { alçada: 100%; marge: 0; farciment: 0; } h1, h3 { text-align: center; } h1 { color: verd; } estil> <body> <h1>techcodeview.comh1><h3>Inserció del fitxer PDF mitjançant Iframe Tagh3> <iframe>iframe> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Sortida:</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ètode 3: Ús</strong> </b> <b> <strong>incrusta l'etiqueta</strong> </b> </h2><ul><li value='1'><span>Quan s'incorpora un codi HTML pdf en un lloc web, l'etiqueta d'inserció no s'utilitza tan sovint com les etiquetes anteriors perquè si el navegador de l'usuari no pot gestionar els fitxers PDF, la pantalla quedarà en blanc.</span></li><li value='2'><span>El mètode d'inserció d'un codi HTML pdf s'utilitza quan no cal proporcionar contingut alternatiu.</span></li></ul><p dir='ltr'> <b> <strong>Exemple</strong> </b> <span>: aquest exemple descriu la incrustació d'un fitxer PDF en HTML mitjançant l'etiqueta d'inserció.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>PDF a HTMLtitle> cap><style>.pdf { amplada: 100%; relació d'aspecte: 4/3; } .pdf, html, cos { alçada: 100%; marge: 0; farciment: 0; } h1, h3 { text-align: center; } h1 { color: verd; } estil> <body> <h1>techcodeview.comh1><h3>Incrustar el fitxer PDF mitjançant embed Tagh3> <embed>cos> html>>></pre> </code> <p dir='ltr'> <b> <strong>Sortida:</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="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/powershell-tutorial/">Tutorial De Powershell</a> </li><li> <a href="/tally-tutorial/">Tutorial De Tally</a> </li><li> <a href="/coding-problems/">Problemes De Codificació</a> </li><li> <a href="/minecraft-guide/">Guia De Minecraft</a> </li><li> <a href="/c-set-function/">Funció Conjunta C++</a> </li><li> <a href="/algorithms-backtracking/">Algoritmes-Backtracking</a> </li><li> <a href="/sorting/">Classificar</a> </li><li> <a href="/art-culture/">Art I Cultura</a> </li><li> <a href="/arrays/">Arrays</a> </li><li> <a href="/java-mail-tutorial/">Tutorial De Java Mail</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">Diferència entre programa i programari</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Diferència entre programa i programari amb una llista de les principals diferències i exemples en temps real que inclouen imatges, gos, gat, brut, net, java, base de dades, ciència, general, anglès, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/difference-between-program"> <i class="fa fa-external-link"></i> Llegir Més</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articles D'Interès</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/ms-excel-tutorial/">Tutorial De Ms Excel</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/divide-and-conquer/">Dividir i conquistar</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/bitwise-operator-c">Operador bit a bit en C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/microsoftexcel/">Microsoftexcel</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/steps-create-servlet-example">Passos per crear un exemple de servlet</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">Entrades Populars</h2>
<div class="content">
<ul class="list"> <li><a href="/java-string-length">longitud de la cadena java</a>
</li><li><a href="/how-print-java">impressió java</a>
</li><li><a href="/what-is-network-topology">topologies</a>
</li><li><a href="/what-is-bash">closca de tornada</a>
</li><li><a href="/spring-boot-annotations">anotacions a Spring Boot</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 Tots Els Drets Reservats | <a href="//sr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa</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>