Laboratorio. Icono de código. Photo by Alex Kondratiev on Unsplash

Incrustar un PDF en una página web

Sigo buscando y documentando soluciones para la creación de espacios web usables, prácticos y amables con la experiencia de usuario. Práctica que utilizo además como excusa para crear contenido para mi blog.

Realizo esto porque estoy convencido que, al final, el sitio web se convierte en un vendedor más de la empresa y la atención (experiencia) que brinde al cliente (usuario) debe ser la mejor.

Hoy estuve revisando un sitio web de una de las empresas donde trabajo y me encontré con un texto que me llamó la atención: “Consulte aquí el Organigrama (…)”, utilizando la palabra “aquí” como rótulo de navegación.

Primera solución:

Los rótulos de navegación deben ser dicientes, es decir, las palabras que se utilizan en el enlace deben dejar claro qué va a encontrar el usuario (por no agregar que Google también se interesa en lo que dicen los enlaces).

En el caso del enlace que se menciona, la palabra “aquí” no es clara sobre el recurso que está conectando. Lo recomendable es realizar en el enlace sobre “Organigrama”. Incluso, la palabra “aquí” puede sobrar. Miremos un ejemplo:

Una práctica común: Consulte aquí sobre los delfines rosados

Una mejor opción: Conozca los delfines rosados

Como ven, el segundo enlace es más preciso.

Segunda solución:

Continué con la revisión del enlace y me enteré que el recurso que conectaba era un PDF, el cual se cargaba en una nueva pestaña del navegador. Me pareció bien, pero quería mejorar la experiencia de usuario. Fue entonces cuando realicé una búsqueda en Google, tratando de ubicar una solución sencilla, liviana y libre. 

Mis palabras de búsqueda fueron: “embed pdf on website”. Como algunos de mis estudiantes saben, no soy el mejor en inglés pero trato de realizar búsquedas en este idioma para obtener mejores resultados (mientras los hispanohablantes generamos más contenidos para la Web, como este).

El primer resultado fue un JS (PDF.js) que -según el autor- es tecnología HTML5 que visualiza documentos PDF sin ayuda del código nativo del navegador. Sin embargo tenía la duda sobre la posibilidad de incrustar el documento en la misma página web.

Revisé un poco más sobre este proyecto y llegué al Github de ellos. Allí perdí la esperanza en la solución, pues encontré muchos archivos y carpetas que poco me orientaban sobre su integración. Sin embargo, hago la referencia por si les interesa explorar más.

Regresé a Google y seguí buscando.

Google, como solución:

El segundo resultado de búsqueda me ofrecía una nueva respuesta:

“You can also use Google PDF viewer for this purpose. As far as I know it's not an official Google feature (am I wrong on this?), but it works for me very nicely and smoothly. You need to upload your PDF somewhere before and just use its URL”

Según cuentas, podía utilizar un visor de Google para incrustar el documento PDF. Esta solución era libre, soportada en Google (al parecer) y fácil de administrar.

Aquí está el código de inserción:

<iframe
   src="http://docs.google.com/gview?url=http://web.com/mypdf.pdf&embedded=true"
   style="width:700px; height:700px;"
   frameborder="0">
</iframe>

Explicando el código de Google:

¿Qué quiere decir esta línea de código HTML? Es muy fácil comprender su significado. Para ello voy a separar la etiqueta y parámetros. Ya es tu tarea volver a armar el código:

iframe: Es una etiqueta HTML que se utiliza para incrustar un recurso web en el documento actual. Piense en una región de su página donde se carga un contenido que está en otra parte.

src: Este parámetro nos permite indicar la ubicación del recurso (en este caso, el PDF). La clave aquí está en modificar la línea, conservando http://docs.google.com/gview?url=. Al final de URL se anota la ubicación del PDF.

Por ejemplo, si el documento PDF está en vp.com/veo.pdf, el parámetro src debe quedar así:

src="http://docs.google.com/gview?url=//vp.com/veo.pdf&embedded=true".

Como ve, se conserva: &embedded=true.

style: permite definir el ancho y alto de la iframe. En el código de ejemplo aparece un alto (height) y ancho (width) de 700 pixeles. Solo hace falta cambiar los valores.

frameborder: Este parámetro simplemente define el grosor del borde del iframe. Puede dejarlo en cero,… es más bonito.

Listo el proceso

Y eso es todo. Solo hace falta insertar el código en su página web, guardar cambios y probar.

Vale recordar que lo importante en la construcción de un sitio es la experiencia de usuario. Busque, experimente e integre soluciones que den valor a su sitio. Pero, atento, la idea tampoco es saturar su espacio web con “cuanta arandela” sale en Google.

¿Necesitas apoyo en tu proyecto web? Contáctame

¿Tienes una pregunta sobre el artículo? Cuéntame en los comentarios. Además, si quieres que escriba sobre algún tema, anótalo a continuación para agregarlo a la agenda de contenidos.

Logo NequiTu aporte permite crear contenidos. Envía un aporte Nequi

Logo PayPalHay más posibilidades. Apoya el blog desde PayPal.me

Logo YouTube¡Vamos por los 10.000 suscriptores en YouTube! Suscríbete

Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter

Licencia Creative Commons Incrustar un PDF en una página web por juancadotcom se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional. Basada en una obra en https://e-lexia.com/blog.

14 respuestas a «Incrustar un PDF en una página web»

  1. Tengo varios botones que despliegan vantanas modales en las cuales se carga el pdf con pero mi pagina se recarga o no carga indicando el navegador en mobil que hay error recurrente en el sitio..

  2. buenas noches con todos tengo un problema hace dias deseo subir un archivo PDF que esta en mi PC y quiero que los usuarios lo visualizan y descarguen desde mi pagina web auda por favor mi pagina web es de una municipalidad

    1. Hola Álex. Gracias por escribir.

      Lo primero que debes hacer es tener tu archivo en Internet.

      Si administras un sitio web, debes tener acceso vía FTP (o similar) y ya está. Capturas las URL y la compartes con tus usuarios.

      La otra opción es subir tu documento a un servicio de almacenamiento en línea (como Google Drive o Dropbox), hacerlo público y compartir el enlace.

      Cuéntame qué opción te queda más fácil y te sigo orientando.

      Saludos desde Colombia. Juan

  3. Hola Juan Carlos, encontré interesante tu artículo, (más por lo que no pudiste comprender), pero la cita es lo importante, el tema da no solo para hacer un artículo, sino toda una clase de desarrollo, pero al mismo tiempo tu solución es muy practica. Para una cuestión básica el mecanismo de google es el más sencillo.

    Su interfaz es muy sencilla pero cumple su propósito con la ventaja de (poder incluir el documento dentro del DRIVE del usuario. Si es es lo que se pretende está muy bien).

    El caso del desarrollo Motzilla es para otros fines, (se trata de una librería que hay que integrar como parte de un entorno, se requiere varios archivos para que funcione, a cambio la interface es muy bonita., lamento que no pueda agregarte por este medio las pantallas para la valoración de que se obtiene con una o con otra alternativa.

    Por último: la manera más sencilla y tradicional (aun con HTML5) es por medio de la siguiente instrucción HTML. más sencilla que la de google, si eso es lo que se desea obtener.

    <!–
    utilizado desde xhtml o HTML5

    –>

    es la etiqueta para cualquier medio x, como cuando era natural incluir flahs el ya descontinuado formado gracias a Steve Jobs, que no le gustaba para nada, y ello dió pié para muchos cambios tecnológicos con el arribo de la ipad.

    Espero que mi contribución te sirva, y les sirva a tus lectores.
    Un abrazo desde México, D.F.

    1. Hola Miguel. Gracias por el comentario.

      Tal como comentas, la solución de Google es la más sencilla y práctica. Esta parte del hecho que tenemos Google Drive, que nuestro documento es público y no tenemos mayores requerimientos de orden técnico.

      Sobre lo que comentas de Motzilla, no alcanzo a comprender muy bien (otra vez). ¿Tienes un blog o un canal en YouTube donde compartas esta otra solución? Sería interesante ampliar este concepto, pues -según las estadísticas de mi blog- esta entrada es de las que más impacto tiene.

      Quedo atento. Saludos desde Colombia.

    1. Hola Juan. Gracias por el comentario.

      Por lo que he revisado, el visualizador de Google necesita que el documento está disponible en el caché del dispositivo del usuario (en los archivos temporales). En ese orden, el documento ya es susceptible de descargarse (redundante) e imprimirse.

      Creo que ya sería necesario implementar una nueva solución, como https://pdfobject.com/. Esta es una librería JS que te permite visualizar, pero no descargar ni imprimir. Aunque, recuerda que «todo» en la red es susceptible de descargarse.

      Saludos desde Colombia.

  4. Gracias Juan me ayudaste de mucho, quisiera saber si ese mismo código de ayuda a insertar un PDF de mi escritorio sin que este colgado en ninguna página, agradeceria tu pronta respuesta.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.