Insertar PDF en HTML

1. Utilice la etiqueta embed para incrustar PDF en HTML
2. Utilice la etiqueta iframe para incrustar PDF en HTML
3. Utilice la etiqueta object para incrustar PDF en HTML

En este tutorial, presentaremos métodos para incrustar PDF en HTML.

Utilice la etiqueta embed para incrustar PDF en HTML

HTML ofrece una etiqueta embed para incrustar recursos externos en la página web. Podemos incrustar recursos externos como archivos PDF, reproductores multimedia, páginas web, etc., utilizando la etiqueta embed. La etiqueta tiene el atributo src donde podemos dar la ruta del archivo a incrustar. Podemos especificar el tipo de archivo incrustado con el atributo type. Para PDF, el atributo type debe ser application/pdf. La etiqueta embed es una etiqueta de cierre automático.

Por ejemplo, cree un archivo llamado files en el directorio donde se encuentra el archivo HTML. Dentro del archivo files, se encuentra un PDF husky.pdf. En HTML, escriba la etiqueta embed y especifique la ruta files/husky.pdf en el atributo src. A continuación, establezca el atributo type en application/pdf. Indique la anchura y la altura del PDF de 100%.

El siguiente ejemplo generará el PDF husky.pdf en la página web. El PDF cubrirá la ventana gráfica ya que la altura y el ancho se establecen en 100%.

Es posible que la etiqueta embed no sea compatible con todos los navegadores modernos. El navegador Chrome de Android no admite la incrustación de PDF. En tales casos, podemos utilizar el visor de PDF de Google Drive. Debemos eliminar el atributo type y establecer la URL de Google Drive del PDF. De esta forma, podemos incrustar PDF en HTML.

Código de ejemplo:

<embed src="files/husky.pdf" type="application/pdf" width="100%" height="100%" />

Utilice la etiqueta iframe para incrustar PDF en HTML

La etiqueta HTML iframe nos permite incrustar otros documentos en el archivo HTML. Podemos usarlo para incrustar PDF en HTML. Podemos especificar la ruta del archivo PDF en el atributo src. Podemos establecer la altura y el ancho del PDF dentro de la etiqueta.

Por ejemplo, escriba la etiqueta iframe y establezca el atributo src en files/husky.jpg. Husky.jpg es el archivo PDF a incrustar que se encuentra en el directorio files. El archivo HTML y el directorio files se encuentran en el mismo directorio. Establezca la altura y el ancho del PDF en 100%. El PDF cubrirá la ventana gráfica. El uso de la etiqueta iframe proporciona una barra de desplazamiento vertical al PDF. De esta forma, podemos incrustar un archivo PDF en HTML usando la etiqueta iframe.

Código de ejemplo:

<iframe src="files/husky.pdf" height="100%" width="100%"></iframe>

Utilice la etiqueta object para incrustar PDF en HTML

También podemos usar la etiqueta object para incrustar PDF en HTML. La etiqueta object establecerá un contenedor que utilizará un recurso externo. Los recursos externos pueden ser PDF, medios, páginas web, etc. Podemos establecer la ruta del archivo en el atributo data. Del mismo modo, al igual que los métodos anteriores, podemos establecer la altura y el ancho del contenedor desde la propia etiqueta. Por lo tanto, podemos incrustar PDF en HTML usando la etiqueta object.

Código de ejemplo:

<object data="files/husky.pdf" height="100%" width="100%"></object>