Nosotros aprenderemos cómo incrustar archivos PDF en documentos HTML , además de conocer su implementación a través de ejemplos. A veces, es posible que desees insertar un archivo PDF en un documento o código HTML para que el contenido sea más interactivo. Debido a que los formatos son tan diferentes, no es fácil realizar la tarea.
Estos son los siguientes métodos para hacer esto:
Tabla de contenidos
Método 1: usar Etiqueta de objeto
- La etiqueta de objeto HTML es la primera forma de incrustar archivos PDF. En el siguiente ejemplo, el archivo pdf se mostrará en una página web, que es un objeto.
- Además de incrustar un archivo PDF en una página web, la etiqueta de objeto puede incrustar subprogramas ActiveX, Flash, video, audio y Java.
- Se pueden adjuntar documentos interactivos a un objeto incrustado con una etiqueta HTML.
- Se puede mostrar según sus necesidades en la pantalla utilizando los atributos de alto y ancho del objeto.
Ejemplo 1 : Este ejemplo describe la incrustación de un archivo PDF en HTML usando la etiqueta de objeto.
HTML PDF en HTMLtítulo>cabeza><style>.pdf { ancho: 100%; relación de aspecto: 4/3; } .pdf, html, cuerpo { altura: 100%; margen: 0; relleno: 0; } h1, h3 { alineación de texto: centro; } h1 { color: verde; } estilo> <body> <h1>Portaltecnico.proh1><h3>Incrustar el archivo PDF usando Object Tagh3><object>objeto> cuerpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</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étodo 2: usar un</strong> </b> <a href='/html-iframes' rel=''> <b> <strong>marco flotante</strong> </b> </a> </h2><ul><li value='1'><span>Usar una etiqueta iframe es la segunda forma de incrustar un archivo pdf en una página web HTML. En el desarrollo web, los desarrolladores web utilizan la etiqueta iframe para incrustar archivos en varios formatos e incluso otros sitios web dentro de una página web.</span></li><li value='2'><span>Debido a su amplia compatibilidad, la etiqueta iframe se usa ampliamente para incrustar PDF.</span></li><li value='3'><span>Un navegador que no admite documentos PDF o la etiqueta de objeto también puede usar esta etiqueta para incrustar un código HTML en PDF.</span></li></ul><p dir='ltr'> <b> <strong>Ejemplo 2</strong> </b> <span>: Este ejemplo describe la incrustación de un archivo PDF en HTML usando un iframe.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>PDF en HTMLtítulo>cabeza><style>.pdf { ancho: 100%; relación de aspecto: 4/3; } .pdf, html, cuerpo { altura: 100%; margen: 0; relleno: 0; } h1, h3 { alineación de texto: centro; } h1 { color: verde; } estilo> <body> <h1>Portaltecnico.proh1><h3>Incrustar el archivo PDF usando Iframe Tagh3> <iframe>iframe> cuerpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</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étodo 3: uso</strong> </b> <b> <strong>insertar etiqueta</strong> </b> </h2><ul><li value='1'><span>Al incrustar un código HTML pdf en un sitio web, la etiqueta de inserción no se usa con tanta frecuencia como las etiquetas anteriores porque si el navegador del usuario no puede manejar archivos PDF, la pantalla estará en blanco.</span></li><li value='2'><span>El método de incrustar un código HTML en formato pdf se utiliza cuando no es necesario proporcionar contenido alternativo.</span></li></ul><p dir='ltr'> <b> <strong>Ejemplo</strong> </b> <span>: Este ejemplo describe la incrustación de un archivo PDF en HTML usando la etiqueta incrustar.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>PDF en HTMLtítulo>cabeza><style>.pdf { ancho: 100%; relación de aspecto: 4/3; } .pdf, html, cuerpo { altura: 100%; margen: 0; relleno: 0; } h1, h3 { alineación de texto: centro; } h1 { color: verde; } estilo> <body> <h1>Portaltecnico.proh1><h3>Incrustar el archivo PDF usando embed Tagh3> <embed>cuerpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</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="">Categoría</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/data-science/">Ciencia De Los Datos</a> </li><li> <a href="/data-structures/">Estructuras De Datos</a> </li><li> <a href="/interview-experiences/">Experiencias de entrevista</a> </li><li> <a href="/nginx-tutorial/">Tutorial Nginx</a> </li><li> <a href="/c-dynamic-memory-allocation/">Asignación De Memoria Dinámica C</a> </li><li> <a href="/c-misc/">C-Varios</a> </li><li> <a href="/english-blogs/">Blogs En Inglés</a> </li><li> <a href="/uml-tutorial/">Tutorial Uml</a> </li><li> <a href="/java-serialization/">Serialización De Java</a> </li><li> <a href="/cash-app-queries/">Aplicación Cash - Consultas</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">Convertidor de cm a mm</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> techcodeview.com (cm a mm) Calculadora de centímetros a milímetros: herramienta sencilla en línea para convertir longitudes de cm a mm. Preciso y fácil de usar, con una tasa de conversión de 1 cm = 10 mm. ¡Intentalo!</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/cm-mm-converter"> <i class="fa fa-external-link"></i> Leer Más</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Artículos De Interés</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-many-grains-sand-earth">¿Cuántos granos de arena hay en la Tierra?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/legend-tarzan-full-cast">La leyenda de Tarzán – Reparto completo y personajes</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-185-centimeters-feet">¿Cuánto son 185 centímetros en pies y pulgadas?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-array-map-method">Método JavaScript Array map()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/lucas-numbers">Números de Lucas</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">Entradas Populares</h2>
<div class="content">
<ul class="list"> <li><a href="/java-string-equals">java es igual</a>
</li><li><a href="/java-try-catch-block">intento de captura de java</a>
</li><li><a href="/constructors-java">constructor en java</a>
</li><li><a href="/how-unzip-files-linux">descomprimir en Linux</a>
</li><li><a href="/cathode-ray-tube">monitor de tubo de rayos catódicos</a>
</li><li><a href="/tripti-dimri">invierno trippy</a>
</li><li><a href="/semantic-error">error semántico</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 Todos Los Derechos Reservados | <a href="//ja.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad</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>