En ocasiones puedes querer mostrar un PDF en tu web pero sin obligar a tus visitantes a descargarlo, o darles la posibilidad de consultarlo pero sin que salga de tu servidor (por ejemplo, un libro de instrucciones en una ficha de producto de WooCommerce).

En este artículo vamos a ver qué diversas opciones tenemos en WordPress para conseguirlo, tanto mediante plugins como sin necesidad de usarlos.

Mostrar un PDF en tu web sin usar plugins

Los plugins nos hacen la vida más fácil en WordPress, pero no son la panacea. Ya sabes que un gran número de plugins afectan negativamente el rendimiento de un sitio web, y debes evitar instalar aquellos que no necesites de verdad.

Especialmente si son para una cosa puntual y tienes alternativas. Así que, si vas a “incrustar” archivos PDF en un gran número de páginas de tu web quizá te merezca la pena instalar uno de los plugins de lo que hablo en la siguiente sección, pero si planeas hacerlo de manera puntual lo mejor es que utilices un método “libre de plugins”.

Esto cuenta con la ventaja adicional de que no sólo sirve para WordPress sino que, al ser código HTML, te servirá para cualquier web. Vamos allá.

Mostrar un PDF haciendo uso del visor de PDF de Google Docs

Efectivamente, Google Docs cuenta con su propio visor de PDF, y podemos utilizarlo simplemente “pasándole” la dirección URL en la que está el documento y después incrustando la visualización en un iframe, una especie de “ventana” dentro de nuestra web en la que se muestra el contenido de otra.

Tampoco es necesario entender el concepto técnico que hay tras esto: implementarlo es muy sencillo. Basta con utilizar el código:


<iframe src="https://docs.google.com/gview?url=https://www.tuweb.com/ruta-al-archivo.pdf&embedded=true" frameborder="0" style="width:800px;height:400px;"></iframe>


Así que el asunto es fácil. Sólo tienes que subir el PDF a la biblioteca de medios e incluir el código en la ventana de edición. Eso sí, tendrás que hacerlo pinchando primero en la pestaña que dice HTML en la parte superior derecha del editor.

Sólo tendrás que sustituir la ruta real del archivo y asignar a los atributos de ancho (width) y alto (height) los valores que prefieras. El resultado sería el siguiente:

Como ves, implementarlo es bastante sencillo y además muestra un visor básico, con opción de abrirlo en una nueva página (te lleva al visor de Google Docs) y con funcionalidad de zoom.

Mostrar un PDF incrustándolo en la página

Si no quieres usar un iframe siempre puedes recurrir a incrustar el archivo directamente en la web, como se ha hecho de toda la vida antes de la llegada de la web 2.0. Con la etiqueta embed de HTML.


<object style="width:800px;height:400px;border:1px solid black;" data="https://www.tuweb.com/ruta-al-archivo.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf">
<embed src="https://www.tuweb.com/ruta-al-archivo.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf" />
</object>


De nuevo los pasos a seguir serían los mismos que con el método anterior, y el resultado es bastante similar:

Mostrar un PDF en tu web con WordPress usando plugins

Como has podido ver, los dos métodos anteriores no están mal, pero si es algo que quieres hacer en muchas páginas (siguiendo con el ejemplo de los libros de instrucciones, puedes querer hacerlo en todas las fichas de producto) entonces se vuelve engorroso e ineficaz.

En ese caso sí puede merecer la pena utilizar un plugin, debido al ahorro de tiempo y a la comodidad para establecer las opciones de forma independiente del código. Vamos a ver un par de alternativas.

PDF Embedder

Nota: no recomiento instalar éste, sólo lo muestro para que puedas comparar.

Este plugin básicamente lo que hace es automatizar el último método que hemos visto pero ahora, en lugar de tener que introducir el código cuando quieras incrustar un PDF, podrás añadirlo directamente utilizando el botón Añadir objeto que hay sobre el editor de WordPress, exactamente igual que haces para añadir una imagen.

Al hacerlo, PDF Embedder te generará un shortcode (que también puedes poner manualmente):

[pdf-embedder url="https://www.tuweb.com/ruta-al-archivo.pdf]


Sin embargo también aporta ciertas mejoras respecto al modo “artesanal” de incrustar el PDF, ya que provee de una barra de herramientas que permite elegir página de destino y zoom y puedes elegir el ancho y alto en que se muestra el documento.

No tienes más opciones disponibles (Ajustes > PDF Embedder), al menos en la versión gratuita. Como desventaja hay que decir que en la barra de herramientas colocan un enlace a su sitio web.

Te muestro el aspecto con una imagen, más que nada por no dejarme instalado un plugin que seguramente no voy a utilizar en esta web:

PDF Viewer

Voy a ser sincero: no entiendo por qué alguien iba a querer utilizar PDF Embedder existiendo PDF Viewer. Como decía más arriba, sólo lo muestro para que puedas comparar.

El funcionamiento básico es similar (un shortcode), pero las diferencias entre uno y otro son abismales.

[pdfviewer width="800px" height="400px" beta="true/false"]https://www.tuweb.com/ruta-al-archivo.pdf[/pdfviewer]


La primera diferencia la puedes apreciar en el código: aunque puedes establecer la altura y el ancho que el visor tendrá por defecto en las opciones (Ajustes > PDF Viewer) también puedes, opcionalmente, incluirlas en el shortcode y se aplicarán a esa instancia concreta del visor.

Y el visor, siendo justos, no tiene nada que ver con el anterior. De hecho, incluye todo lo que incluye el de PDF Embedder (menos, por supuesto, el enlace saliente) y muchas más utilidades. Destacan los menús desplegables, especialmente el de la derecha:

Ya ves todas las posibilidades que aporta al usuario:

• Abrir en el visor un PDF desde el ordenador del usuario (sí, como lo oyes).
• Imprimir el archivo.
• Descargarlo.
• Girarlo en una u otra dirección.
• Cambiar a la herramienta “mano”.
• Visualizar las propiedades del documento.

También proporciona un zoom automático en el desplegable superior con diversas opciones como ancho real, ancho completo, encaje automático, diversos zooms predefinidos, etcétera.

Conclusiones

En fin, ya lo has visto. Soy defensor de que haya diversos plugins que realicen la misma función o parecida, ya que siempre habrá alguno que se ajuste mejor a las necesidades de un usuario, mientras que otro vendrá mejor para otras necesidades concretas.

Sin embargo, en este caso (como dice el dicho), “no hay color”. Si me pides que te recomiende un plugin para visualizar documentos PDF en WordPress apostaré por PDF Viewer, a pesar de las diversas opciones que hay en el repositorio.

En sólo un caso determinado podría estar justificado usar PDF Embedder (u otro similar) frente a PDF Viewer: si no quieres dar al usuario la opción de descargar el archivo PDF. Ojo, que si quiere lo va a poder hacer igualmente (basta con mirar el código) pero al menos PDF Embedder no te presenta la opción directamente.