En este artículo, aprenderemos cómo incrustar archivos PDF en documentos HTML, además de conocer su implementación a través de los ejemplos. A veces, es posible que desee 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, que no es fácil de realizar la tarea.
Para aprender a agregar archivos PDF a código HTML, debe saber cómo convertir archivos con software PDF, como requisito previo. El diseño estático de PDF lo hace incompatible con el diseño receptivo de HTML. Para insertar un PDF en HTML, primero debemos convertir el archivo. Una alternativa es incrustar el código HTML del PDF en una página web para que sea interactiva. Los siguientes métodos de incrustación se pueden utilizar para agregar PDF a un archivo HTML:
- Uso de la etiqueta de objeto
- Usando un marco flotante
- Uso de la etiqueta de inserción
Exploraremos y entenderemos estos métodos en detalle a través de sus implementaciones.
Método 1: usar la etiqueta de objeto
La etiqueta de objeto de 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. Los documentos interactivos se pueden adjuntar a un objeto incrustado con una etiqueta HTML. Se puede mostrar según sus necesidades en la pantalla utilizando los atributos de altura y ancho del objeto.
Ejemplo 1 : este ejemplo describe la incrustación de un archivo PDF en HTML utilizando la etiqueta de objeto.
HTML
<!DOCTYPE html> <html> <head> <title>PDF in HTML</title> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <h3>Embedding the PDF file Using Object Tag</h3> <object data= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210101201653/PDF.pdf" width="800" height="500"> </object> </center> </body> </html>
Producción:
Uso de la etiqueta de objeto
Método 2: Usar un iframe
El uso de 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 usan la etiqueta iframe para incrustar archivos en varios formatos e incluso otros sitios web dentro de una página web. Debido a su amplia compatibilidad, la etiqueta iframe se usa ampliamente para incrustar pdf. Un navegador que no admita documentos PDF o la etiqueta de objeto también puede usar esta etiqueta para incrustar un código HTML pdf.
Ejemplo 2 : este ejemplo describe la incrustación de un archivo PDF en HTML usando un iframe.
HTML
<!DOCTYPE html> <html> <head> <title>PDF in HTML</title> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <h3>Embedding the PDF file Using Iframe Tag</h3> <iframe src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210101201653/PDF.pdf" width="800" height="500"> </iframe> </center> </body> </html>
Producción:
Usando la etiqueta Iframe
Método 3: usar la etiqueta de inserción
Al incrustar un código HTML pdf en un sitio web, la etiqueta incrustada 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. El método de incrustar un código HTML en pdf se utiliza cuando no es necesario proporcionar contenido alternativo.
Ejemplo 3 : este ejemplo describe la incrustación de un archivo PDF en HTML utilizando la etiqueta incrustada.
HTML
<!DOCTYPE html> <html> <head> <title>PDF in HTML</title> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <h3>Embedding the PDF file Using embed Tag</h3> <embed src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210101201653/PDF.pdf" width="800" height="500"> </center> </body> </html>
Producción:
Uso de la etiqueta incrustada
Publicación traducida automáticamente
Artículo escrito por muthuannamalai2002 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA