Visualizar un pdf dentro de una página html

13/09/2016 Tweet
Visualizar un pdf dentro de una página html

Normalmente cuando queremos mostrar al usuario un documento pdf, el navegador por defecto nos lo abre en un visor independiente de Adobe Reader. De la siguiente manera podemos incrustar el pdf dentro nuestra página sin necesidad de usar flash.

<object data="http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf" type="application/pdf" width="100%" height="100%">
<p>Tu navegador no tiene el plugin para previsualizar documentos pdf.</p> <p>Puedes descargarte el archivo desde <a href="myfile.pdf">aquí</a></p>
</object>

El contenido que hay dentro de la etiqueta <object> se mostrará en el caso de que el navegador no tenga instalado el plugin de Adobe Reader para previsualizarlo. En este caso hemos puesto un enlace que permitirá descargar el pdf.

Además existen una serie de parámetros que podemos añadir a la url del documento para poder controlar ciertos comportamientos del visor. Algunos de estos parámetros y sus valores son los siguientes:

Parámetro Valor Descripción
toolbar 1|0 Muestra u oculta la barra superior. Por defecto es 1.
navpanes 1|0 Muestra u oculta la barra de navegación y las pestañas
scrollbar 1|0 Activa o desactiva el scroll
page entero Indica el número de página del documento por donde se abrirá. La primera página del documento tiene valor 1.
zoom entero Establece el zoom al que se mostrará inicialmente el pdf. Si el valor es 100 estaremos indicando que se escale al 100%.

Para añadir estos parámetros hay que hacerlo al final de la url con #. Si vamos a añadir varios lo hacemos con &.

Ejemplos urls con parámetros:

http://midocumento.pdf#page=3&zoom=50
http://midocumento.pdf#page=3&zoom=50&toolbar=0&navpanes=0

Aquí puedes ver todos los parámetros que se pueden añadir y sus valores.

Referencias