Por regla general, utilizamos un enlace para mostrar un documento PDF en el navegador. Pero si, en realidad, quieres mostrar el propio PDF en el interior de una página, lo suyo es en embeberlo en la página web. El tag <embed> es la mejor opción para embeber documentos PDF en un sitio web. En este tutorial te mostraremos cómo mostrar los archivos PDF en una página web utilizando el tag <embed>.
El tag <embed> define un contenedor para cargar contenido externo. El tag <embed> admite estos parámetros:
- src: Especifica la ruta del fichero externo a embeber
- type: Especifica la categoría del contenido embebido
- width: Especifica el ancho del contenido embebido
- height: Especifica el alto del contenido embebido
Embeber un PDF en HTML
Utiliza el siguiente código para embeber un fichero PDF en una página web.
<embed src="files/ejemplo.pdf" type="application/pdf" width="100%" height="600px" />
A continuación te mostraremos cómo gestionar cómo se representan los archivos PDF cuando los embebes. Utilizando parámetros en la URL podrás especificar exactamente qué mostrar en el PDF y cómo mostrarlo.
Los siguientes parámetros se suelen utilizar a la hora de embeber un archivo PDF en HTML o a la hora de abrirlo en el navegador.
- page=pagenum: Especifica el número de páginas a ver. La primera página del documento es la número 1 y no la 0.
- zoom=scale: Define los factores de zoom y scroll mediante valores enteros o floats. Por ejemplo, un scale de 100 indica un zoom del 100%.
- view=Fit: Define la vista de la página mostrada
- scrollbar=1|0: Activar o desactivar el scroll
- toolbar=1|0: Activar o desactivar la barra de herramientas
- statusbar=1|0: Activar o desactivar la barra de estado
- navpanes=1|0: Activar o desactivar los paneles o pestañas
Parámetros en la URL
Puedes especificar múltiples parámetros en la URL. Tienes que separar cada parámetro con el carácter ampersand (&) y para empezar a definir cada uno de ellos, debes utilizar el carácter almohadilla (#). Las acciones se ejecutan de izquierda a derecha y las acciones posteriores anularán las acciones anteriores.
Una URL con parámetros tendría este aspecto:
http://ejemplo.com/doc.pdf#Chapter5
http://ejemplo.com/doc.pdf#page=5
http://ejemplo.com/doc.pdf#page=3&zoom=200,250,100
http://ejemplo.com/doc.pdf#zoom=100
http://ejemplo.com/doc.pdf#page=72&view=fitH,100
Desactivar y ocultar la barra de herramientas en el visor web de PDFs
En este ejemplo puedes ver cómo ocultar o eliminar la barra de herramientas, los paneles y pestañas y la barra de scroll de un PDF embebido con el tag <embed> mediante parámetros en la URL.
Utiliza el siguiente código para embeber archivos PDF en una página web y eliminar u ocultar la barra de herramientas del PDF embebido.
<embed src="files/ejemplo.pdf#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" width="100%" height="600px"
