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="//changelesschoir.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="/tally-tutorial/">Tutorial De Conteo</a> </li><li> <a href="/techtips/">Consejos técnicos</a> </li><li> <a href="/postgresql-tutorial/">Tutorial De Postgresql</a> </li><li> <a href="/algebra/">Álgebra</a> </li><li> <a href="/java-reflection/">Reflexión De Java</a> </li><li> <a href="/physics/">Física</a> </li><li> <a href="/arithmetic-maq/">Aritmética - Maq</a> </li><li> <a href="/array-range-queries/">Consultas De Rango De Matriz</a> </li><li> <a href="/matplotlib-pyplot-class/">Matplotlib Clase Pyplot</a> </li><li> <a href="/math-statistics/">Estadística Matemática</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="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">HashMap contiene el método Key() en Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portal de informática para geeks. Contiene artículos de programación y ciencias de la computación bien escritos, bien pensados y bien explicados, cuestionarios y preguntas de práctica/programación competitiva/entrevistas de empresa.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/hashmap-containskey-method-java"> <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-set-git-username">¿Cómo configurar el nombre de usuario y la contraseña de Git en GitBash?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cosine-similarity">Similitud del coseno</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/delete-directory-file-using-python">Eliminar un directorio o archivo usando Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-20-std-format">C++ 20 – estándar::formato</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/act-vs-sat-11-key-differences-help-you-pick-right-test-1311422">ACT vs SAT: 11 diferencias clave para ayudarlo a elegir el examen correcto</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-compare">comparar en cadena</a>
</li><li><a href="/java-string-compareto">comparación de cadenas java</a>
</li><li><a href="/types-software-testing">tipos de pruebas</a>
</li><li><a href="/database">base de datos</a>
</li><li><a href="/java-list">métodos de lista java</a>
</li><li><a href="/mark-zuckerberg">educación de mark zuckerberg</a>
</li><li><a href="/what-is-reference-variable-java">variable de referencia en 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 Todos Los Derechos Reservados | <a href="//de.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>