Google Embedded Document Viewer in Liferay Portlet

Google Embedded Document Viewer in Liferay Portlet

Objective: To show documents in liferay portlet

Download Liferay Document Viewer portlet from following location

You can find source and war file

https://sourceforge.net/projects/meeralferay/files/LiferayDocumentViewerPortlet/

Note:  Portlet developed in Liferay 6.1GA2 EE version

If you want deploy in CE version you just do changes in liferay-plugin-package.properties

Liferay 6.1 EE version

name= LiferayDocumentViewr module-group-id=liferay-ee module-incremental-version=1 tags= short-description= change-log= page-url=http://www.liferay.com author=Liferay, Inc. licenses=EE liferay-versions=6.1.20

Liferay 6.1 CE version

name = LiferayDocumentViewr module-group-id=liferay module-incremental-version=1 tags= short-description= change-log= page-url=http://www.liferay.com author=Liferay, Inc. licenses=LGPL liferay-versions=6.1.1

Google provides document viewer so that we can display liferay documents in Google document viewer.

This viewer can display PDF and MS Documents (doc, docx, ppt, xsl, xslx) without any configurations.

It’s simple URL request we need to pass document source to the URL so that we can view the document.

In life ray we store our documents in Document Media Library portlet .

 So each document have unique web URL to access document so that we can pass this URL to Google document viewer from that  can view document in portlet. This document is visible in iframe in portlet.

Generally in liferay its bit tricky to view MS Documents to view MS Documents in liferay  we have to do some configuration then only we can view documents .

Liferay 6.1x have this configurations but before 6.1x we can view only PDF documents.

So Google document viewer can give best and easy way to view document in portlet. Here only one thing is its iframe.

Before Liferay 6.1x also we can see documents by following way.

Already we have option in liferay can see PDF documents.

Here we can covert DOC to PDF so that we can view documents but for this we need to do some programming.

To convert DOC to PDF we have JOD converter from this converter we can convert DOC to PDF. This is all for before 6.1x version.

From 6.1x we can view PDF and MS Documents but we have to configure open office .

This all about view documents in liferay.

But Google Document viewer not worries about anything it’s just URL request and we can view in iframe.

Request URL for Google document viewer

http://docs.google.com/gview?url=http://www.ezconf.net/docs/SOLI%202008/sample.doc&embedded=true

Request Parameters:

url:     it is source of document

embedded: this is value is true.

The following is Sample code for to Google Document viewer in IFrame

<iframe frameborder="0" border="0" scrolling="no" src="http://docs.google.com/gview?url=http://www.ezconf.net/docs/SOLI%202008/sample.doc&embedded=true" style="width:800px; height:800px;" frameborder="0" id="iframe"> </iframe>

 Important Attributes:

src: this is URL request to get Google document viewer.

height: height of iframe

width: width if iframe

Complete example for liferay portlet:

<%@page import="com.liferay.portal.kernel.util.ParamUtil"%> <%@page import="java.util.List"%> <%@page import="java.util.ArrayList"%> <%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %> <%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %> <%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %> <%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %> <%@ taglib uri="http://liferay.com/tld/util" prefix="liferay-util" %> <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %> <portlet:defineObjects /> <liferay-theme:defineObjects /> <% List<String> urlList=new ArrayList<String>(); urlList.add("http://docs.liferay.com/portal/6.0/official/liferay-developer-guide-6.0.pdf"); urlList.add("http://www.ezconf.net/docs/SOLI%202008/sample.doc"); urlList.add("http://docs.liferay.com/portal/6.0/official/liferay-developer-guide-6.0.pdf"); String documentUrl=ParamUtil.getString(renderRequest,"docUrl"); %> <style> #documentViewrTable{ vertical-align: top; } #documentViewrTable td { padding-left:10px; vertical-align: top; padding-right: 25px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; } </style> <table id="documentViewrTable"> <tr> <td> <%for(String url:urlList){ %>  <portlet:renderURL var="documentRenderURL">   <portlet:param name="docUrl" value="<%=url%>"/>  </portlet:renderURL>   <a href="<%=documentRenderURL%>"><div class="documentURL" >Document1</div></a>   <%} %>    </td>   <td>     <%if(documentUrl!=null&&!documentUrl.isEmpty()){ %>    <iframe frameborder="0" border="0" scrolling="no"  src="http://docs.google.com/gview?url=<%=documentUrl%>&embedded=true"   style="width:800px; height:800px;" frameborder="0"  id="iframe">  </iframe>     <%}%>  </td>                     </tr> </table>

Screen:

Reference Links

http://www.w3schools.com/tags/tag_iframe.asp

http://googlesystem.blogspot.sg/2009/09/embeddable-google-document-viewer.html

http://www.labnol.org/internet/google-docs-viewer-alternative/

Author:

Meera Prince