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> <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é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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />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><!--//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="/gcc/">Ccg</a> </li><li> <a href="/best-apps/">Mejores Aplicaciones</a> </li><li> <a href="/physics-class-12-cat/">Física-Clase-12</a> </li><li> <a href="/algorithms-bubblesort/">Algoritmos-Bubblesort</a> </li><li> <a href="/ruby-tutorial/">Tutorial De Rubí</a> </li><li> <a href="/avl-tree/">Árbol Avl</a> </li><li> <a href="/r-functions/">Funciones R</a> </li><li> <a href="/process-synchronization/">Sincronización De Procesos</a> </li><li> <a href="/restful/">Sosegado</a> </li><li> <a href="/python-csv/">Python-Csv</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Lista de matrices de Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Java ArrayList en colecciones Java con add, ejemplo de colección genérica versus no genérica, addAll, remove, removeAll, contiene, contieneAll, retainAll, métodos clear e iterador, colección genérica y no genérica.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/java-arraylist"> <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="/jfreechart-tutorial/">Tutorial De Jfreechart</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/fibonacci-series-c">Serie de Fibonacci en C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-say-hello-italian-1311162">Cómo decir hola en italiano: 6 saludos comunes</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/10-best-free-audiobook-apps">Las 10 mejores aplicaciones gratuitas de audiolibros para Android (GRATIS)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linear-programming">Programación lineal</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-color-codes">colores java</a>
</li><li><a href="/java-scanner-hasnext-method">java tiene el siguiente</a>
</li><li><a href="/numpy-unique-python">np.único</a>
</li><li><a href="/adversarial-search">búsqueda adversaria</a>
</li><li><a href="/k-nearest-neighbor-algorithm">algoritmo knn</a>
</li><li><a href="/computer-network-types">redes y tipos</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="//cs.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>
</body>
</html>