Google Docs Viewer plugin for jQuery

Here's a little jQuery plugin I wrote recently that automatically embeds the Google Docs Viewer for viewing pdf, doc, docx, ppt and tiff files linked to by anchor tags.

The Google Docs Viewer is an embeddable browser-based viewer that requires only a URL to a file available online. This neatly bypasses the need for users to have compatible software on their machines for those file types and displays the document right in the browser.

Usage


1. Add jQuery and the gDocsViewer plugin to the page.
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.gdocsviewer.min.js"></script>
</head>

2. Set some class name or id to the anchor tag for all URLs to files that you want to be displayed using the Google Docs Viewer. E.g. "embed"
<a href="urltofile.pdf" class="embed">Download file</a>
<a href="urltofile.pdf" id="embedURL">Download file</a>

3. Initialize gDocsViewer and set it to process the URL with id or all URLs with the class name set in the previous step.
$('a.embed').gdocsViewer();
$('#embedURL').gdocsViewer();

Customization


The plugin offers two configuration options that set the width and height of the embedded document IFRAME. This can be set when the plugin is initialized.
$('a.embed').gdocsViewer({ width: 400, height: 500 });

The plugin inserts a the IFRAME for the viewer inside an injected DIV. The DIV tags all carry the class name "gdocsviewer", which allow for styling all the gdocsViewer instances via CSS. If the anchor tag has the ID attribute defined, then the injected DIV tag is also set an ID attribute in the format of ID_of_Anchor + '-gdocsviewer'. See the demo source code for more details.

Demo


- Check out the live demonstration

License

This script is released under the Open Source MIT License, allowing its use in both personal and commercial applications as long as the copyright and license permission notice remains intact.

Download

- jquery.gdocsviewer.v1.0.zip (v1.0, 2.2KB)

Enjoy!

Trackbacks

  1. ZOHO Viewer plugin for jQuery

    I discovered ZOHO Viewer, which supports a lot more file types than Google Docs Viewer, after I wrote the Google Docs Viewer jQuery plugin I posted earlier. So, I wrote another jQuery plugin that automatically embeds the ZOHO viewer for viewing the doc, d

  2. PingBack

  3. PingBack

  4. PingBack

  5. PingBack

  6. PingBack

  7. PingBack

Comments

Display comments as (Linear | Threaded)

  1. Soup says:

    Can you modify your demonstration to do another file type other than PDF? Everyone I know has some sort of PDF reader on their computer. How about showing a doc, xls, etc. I think we got the idea that it works after the first PDF. Did you really need to have two more PDFs after that?

  2. Pashminu Mansukhani says:

    Will this work perfectly on iOS and Android platforms?

  3. Ivano says:

    Hi!

    Hi tried the below but simply it open my PDF file for download :-( Please, could you help me?

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery.gdocsviewer.min.js"></script>

    <a href="<%= content.getUrl() %>" class="embed">Show document</a>

    <script type="text/javascript">
    $('a.embed').gdocsViewer();
    </script>

  4. Munawar says:

    Sample - http://samarasam.net/sample/samarasam.php
    Can you provide the following:
    1. Disable the scrollbar and scroll mouse.
    2. Enable the page number input.
    3. Disable - zoom & view in new window.
    4. Enable PDF Hyperlinks so that we navigate to the particular page.
    I think the final result will be a great display to view any page of pdf with text copy option. This I am searching for 2 weeks, until I reached your website expecting the possibility.

  5. Marcelo says:

    Hi Jawish, greetngs from Chile, I have a doubt with the issue of pdf embeds in the iframe. I get this error with your plugin.

    Uncaught TypeError: Cannot call method 'lastIndexOf' of undefined

    event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

    I follow your step, but I cant get any view of pdf files, this is part of the code:

    <script type="text/javascript" src="jquery.gdocsviewer.min.js"></script>

    </head>

    </script>

    <div id="seccionAyuda" class="dialog" style="display:none; overflow:scroll;">
    <iframe src="${listaResultado.sRutaArchivoAyuda}" style="width:650px; height:340px;" frameborder="0"></iframe>
    </div>

    and with a jquery click function i have this:

    $("#btnAyuda").click(function()
    {
    var myDiv = document.getElementById('seccionAyuda');
    var xDiv = getDimensions(myDiv).x +70;
    var yDiv = getDimensions(myDiv).y +25;
    $('.dialog').gdocsViewer({
    autoOpen: true,
    draggable: true,
    modal: true,
    resizable: false,
    position: [xDiv,yDiv],
    title: "Ayuda",
    height: 475,
    width: 700
    });

    Any Idea what the problem could it be?

  6. RepublicOfZen says:

    Thanks for this.

    Does this work with IE9? Somepeoples browsers have security settings that doesnt allow the Google Doc viewer.

  7. Raghavendra says:

    Hello,

    Kindly let me know Can we disable open in new window.

    Regards,
    Raghavendra

  8. Electron says:

    Thank you brother! This will greatly help me to deal with mobile safari restrictions

  9. kulasekaralwar says:

    Dear sir,

    How can we perform the follow please help.

    Display only links, when click on links pdf should open in new popup window

    Thanks in advance

  10. Anthony says:

    This would work for me if it was capable of accepting relative URLs. It works fine if my URL is "http://..." but if I'm just trying to use a local folder with a path relative to the document location it won't work. Is there any way around this? I would love to use this.

  11. M.R.C.PRASAD says:

    hi Jawish I am developing a phonegap application in android and ios. During the navigation of application i need to open a pdf which is at remote server with in the app browser. It should not get download into the device. So in order to open the pdf in android device i used https://docs.google.com/viewer?url=remote url to view the pdf. But I am able to open the pdf in some android phonegap applciations which i am working but not in some applications. Kindly share a possible solution to open the pdf. The webservices are writeen in java.

  12. Ashish Rathod says:

    Hello

    I have used this jquery but i have got one error when i used live png file for my project . I have also change jquery to add PNG file support but this is not working . so please check and let me know what is the problem ..

    I got that error ..

    Sorry, this type of document is not support for viewing. You can also try to download the original document by clicking here .. and when i clik image is display properly ..


Add Comment


HTML-Tags will be converted to Entities.
Standard emoticons like :-) and ;-) are converted to images.
To leave a comment you must approve it via e-mail, which will be sent to your address after submission.