Merida Design Blog

Publicado el | Artículos / , , , ,

Visor de archivos en tu página web con Google Docs Viewer

Uno de los proyectos en los que he tenido oportunidad de trabajar, fue un sistema para compartir archivos con los empleados de toda la companía cuyo requisito era que éstos archivos fueran visualizados dentro del mismo sistema sin tener que ser descargados.

El reto era que gran parte de éstos archivos eran documentos de Office, Word, Excel y Power Point y sabemos que los navegadores solo permiten visualizar archivos tipo pdf, archivos con otro formato son forzados a su descarga.

La solución

Investigando un poco, descubrí que Google te permite usar el visor de documentos que usa en Drive, bueno en realidad una versión más simplificada, pero bastante completa, ya que nos permite ver todos los siguientes formatos:

  • Image files (.JPEG, .PNG, .GIF, .BMP)
  • Video files (WebM, .MPEG4, .3GPP, .MOV, .AVI, .MPEGPS, .WMV, .FLV, .ogg)
  • Text files (.TXT)
  • Markup/Code (.CSS, .HTML, .PHP, .C, .CPP, .H, .HPP, .JS)
  • Microsoft Word (.DOC and .DOCX)
  • Microsoft Excel (.XLS and .XLSX)
  • Microsoft PowerPoint (.PPT and .PPTX)
  • Adobe Portable Document Format (.PDF)
  • Apple Pages (.PAGES)
  • Adobe Illustrator (.AI)
  • Adobe Photoshop (.PSD)

Ver la lista completa en Google.

Como podemos observar, es una lista de formatos nada despreciable, entre los que podemos observar también algunos formatos web como (html, php, etc), pero para esos formatos recomendaría mas un plugin como Prism.

Implementación

Existen dos maneras de integrar éste visor en nuestra web, la primera es como links externos que abrirán el documento en el navegador en una nueva pestaña, y la otra es a través de un iframe para ver el contenido dentro de nuestra propia página.

Link Externo

Para esta opción lo único que tenemos que hacer, es colocar el enlace a la ruta del visor de google http://docs.google.com/viewer? seguida del parámetro url= y la ruta a nuestro archivo. Es importante que la ruta al archivo este codificada para url.

Código:

<a href="http://docs.google.com/viewer?url=http%3A%2F%2Fmeridadesign.com%2Fdemos%2Fquotes.pptx" title="Quotes" target="_blank">http://meridadesign.com/demos/quotes.pptx</a>

Ejemplo: http://meridadesign.com/demos/quotes.pptx

Iframe

Para mostrar el contenido dentro de un iframe, colocamos como valor del atributo src la misma ruta que en la opción anterior agregando como parámetro adicional &embedded=true, de lo contrario no se mostrará el archivo.

Código:

<iframe src="http://docs.google.com/viewer?url=http%3A%2F%2Fmeridadesign.com%2Fdemos%2Fquotes.ppsx&embedded=true" width="600" height="300" style="border: none;"></iframe>

Ejemplo:

El código necesario para cualquiera de las dos opciones lo puedes obtener automáticamente en la página oficial del Google Viewer.

Conclusión

Si bien éste tipo de integraciones no es algo que pidan en los sitios web comunes, es algo que se puede dar por ejemplo, en sitios que manejan esquemas de membresias con acceso a contenido premium, en donde se pueden incluir éste tipo de archivos.



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: