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> <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è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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />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><!--//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="/rpa-tutorial/">Tutorial Rpa</a> </li><li> <a href="/php-tutorial/">Tutorial De Php</a> </li><li> <a href="/bordering-countries-sea/">Països Limítrofes I Mar</a> </li><li> <a href="/es6-tutorial/">Tutorial Es6</a> </li><li> <a href="/uk-gk/">Regne Unit Gk</a> </li><li> <a href="/process-synchronization/">Sincronització De Processos</a> </li><li> <a href="/css-misc/">Css-Misc</a> </li><li> <a href="/object-oriented-design/">Disseny Orientat A Objectes</a> </li><li> <a href="/python-modules/">Mòduls Python</a> </li><li> <a href="/brain-teasers/">Trencaclosques</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Enumeració en C++</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portal d'informàtica per a frikis. Conté articles d'informàtica i programació ben escrits, ben pensats i ben explicats, proves i preguntes pràctiques/programació competitiva/entrevistes d'empresa.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/enumeration-c"> <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="/difference-between-salesforce">Diferència entre Salesforce i SAP</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/100-group-names-girls-2024-chat-names">Més de 100 noms de grup per a noies 2024 (noms de xat per a cada ocasió)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-lang-integer-class-java">Classe Java.lang.Integer a Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-logical-operators">C Operadors lògics</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/different-methods-reverse-string-c">Diferents mètodes per invertir una cadena en C++</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="/ekta-kapoor">actor ekta kapoor</a>
</li><li><a href="/java-while-loop">bucle while java</a>
</li><li><a href="/sql-select">selecciona com</a>
</li><li><a href="/cloud-computing-applications">aplicacions de computació en núvol</a>
</li><li><a href="/prime-number-program-java">prime no code in 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 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>
</body>
</html>