Document Preview with Google Docs viewer

Question by H Gibson - hgibson@sun.ac.za - 2010/03/15

What is it?:

Document Preview is embedding a document display mechanism into the item display page. It currently uses the Google Doc viewer to download the pdf, and render it into something that can be viewed on the page, eliminating the need of requiring the user to have a PDF viewer or a Word viewer.

Files:

• dspace-jspui/dspace-jspui-api/src/main/java/org/dspace/app/webui/jsptag/ItemTag.java (Item Display Page)
• dspace/modules/jspui/src/main/webapp/utils.js (Custom Javascript)

Instructions:

1. Patch ItemTag.java to add the preview button and the hidden row that contains the iframe.

   --- dspace-jspui/dspace-jspui-api/src/main/java/org/dspace/app/webui/jsptag/ItemTag.java 
   +++ dspace-jspui/dspace-jspui-api/src/main/java/org/dspace/app/webui/jsptag/ItemTag.java 
   @@ -927,10 +980,24 @@
                                                        .getLocalizedMessage(
                                                                pageContext,
                                                                "org.dspace.app.webui.jsptag.ItemTag.view")
   -                                            + "</a></td></tr>");
   +                                            + "</a>");
   +                                                String bsUrl = "/bitstream/"
   +                                                        + item.getHandle()
   +                                                        + "/" + bitstreams[k].getSequenceID()
   +                                                        + "/" + UIUtil.encodeBitstreamName(bitstreams[k].getName(), Constants.DEFAULT_ENCODING);
   +                                                out.print(" or <a href=\"#preview\" onclick=\"setPreviewSource('"+bsUrl+"');\">Preview</a>");
   +                                                out.print("</td></tr>");
                				}
                			}
                		}
   +                        // END, can put the doc viewer here.
   +                        out.println("<tr><td colspan=5>");
   +                        out.println("<a name='preview'");
   +                        out.println("<div id=\"preview\" style=\"display:none;\"> " +
   +                                                            "<iframe id=\"embed\" src=\"\" width=\"100%\" height=\"342px\" style=\"border: none;\"></iframe>" +
   +                                                            "</div>");
   +                        out.println("</td></tr>");
   +
                	}
    
                	out.println("</table>");
   

2. Copy utils.js from dspace-jspui/dspace-jspui-webapp/src/main/webapp/utils.js to dspace/modules/jspui/src/main/webapp/utils.js
3. Patch utils.js to add some additional needed functions.

   --- dspace/modules/jspui/src/main/webapp/utils.js 
   +++ dspace/modules/jspui/src/main/webapp/utils.js 
   @@ -301,3 +307,36 @@
    
    
    
   +function showHideToggle(divID) {
   +	if (document.getElementById && !document.all) {
   +		previewBox = document.getElementById(divID);
   +		var state = previewBox.style.display;
   +		if (state == 'block') {state = 'none';} else {state = 'block';}
   +		previewBox.style.display = state;
   +	}
   +}
   +
   +function urlencode(str) {
   +    return escape(str).replace(/\+/g,'%2B').replace(/%20/g, '+').replace(/\*/g, '%2A').replace(/\//g, '%2F').replace(/@/g, '%40');
   +}
   +
   +String.prototype.endsWith = function(str)
   +{
   +    return (this.match(str+"$")==str)
   +}
   +
   +function setPreviewSource(source) {
   +    if(false) {
   +        // if you need to change bitstream link to use a web viewable server (used in development)
   +        source = "https://kb.osu.edu/dspace" + source;
   +    }
   +
   +    if(source.endsWith(".pdf") || source.endsWith(".doc")) {
   +        source = urlencode(source);
   +        source = "http://docs.google.com/viewer?url="+source+"&embedded=true";
   +    }
   +
   +    $("#embed").attr("src", source); //requires jQuery
   +    showHideToggle('preview');
   +    // and toggle
   +}
   

1. The javascript functions do make minor use of jQuery, which can easily be added:

   <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
   <script type="text/javascript"> 
           google.load("jquery", "1.4");
           google.setOnLoadCallback(function() {
               // Place init code here instead of $(document).ready()
           });
   </script> 
   

2. Be sure to look over the Google Docs viewer TOS https://docs.google.com/viewer/TOS?hl=en
3. I originally posted this concept at Document Preview in DSpace, using Google Docs Viewer