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.


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

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.


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.


- Check out the live demonstration


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.


- (v1.0, 2.2KB)



  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


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 tried the below but simply it open my PDF file for download :-( Please, could you help me?

    <script type="text/javascript" src=""></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">

  4. Munawar says:

    Sample -
    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>



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

    and with a jquery click function i have this:

    var myDiv = document.getElementById('seccionAyuda');
    var xDiv = getDimensions(myDiv).x +70;
    var yDiv = getDimensions(myDiv).y +25;
    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:


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


  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 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:


    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 ..

  13. Web designing in bangalore says:

    you have to install acrobat reader plugin

  14. Web Development Company in India says:

    I think you have to install acrobat reader plug-in. It can be help you.

  15. Jason Ezell says:

    It helped me a lot..

  16. kepran says:

    Kepran Infosoft is a Web Application Development company which provides web application development, PHP web applications, , custom web application development services with quality and time line. Contact our web application development team to know more

  17. Amar says:

    I had used this plugin but getting error as no preview available, why is this error I am getting. Please let me know the solution.

    Thank you,
    Amar Barge

  18. Tim's Solutions says:

    Hello Jawish, will this work if I don’t have the acrobat reader plugin?

  19. tritKi says:

    Четырехканальный GSM VoIP шлюз <a href=>GoIP 4</a> от компании HyberTone Technology Co., Ltd является новой моделью <a href=>VoIP GSM</a> шлюза на базе популярных и недорогих моделей GSM шлюзов GoIP. VoIP GSM gateway GoIP4 совершает звонки между GSM и IP сетями без выхода в телефонную сеть общественного пользования ТфОП, благодаря чему снижаются затраты на телефонную связь в т.ч. и на роуминг. Каждый из четырех GSM каналов VoIP GSM шлюза может работать независимо или в рамках единого логического канала (группы GSM каналов).
    <a href=>Интернет в Симферополе</a>

  20. dave says:

    what code do i need so that when there is a link inside the pdf document it will be open in a new tab

  21. Francisco says:

    Olà precisode ajuda pois montei todos os codigos na minha pagina e esta funcionando perfeitamente no meu servidor local ,mas quando mando os arquivos para o servidor ftp não funciona , me fale oque pode ser sera que é essa coisa que falou do aviso de copyright e permissão de licença permanece intacta.
    Você pode me ajudar??

  22. Maitree Trivedi says:


    I am loading the pdf documents in WebView through appending the pdf url to google doc api

    Pdf is loading just fine but the webpage displays two options - Zoom-in and Pop-Out. Is there any way to disable/hide pop-out option by sending some param? Any help would be appreciated.Thanks in advance!

  23. Ravi says:

    I'm trying to highlight certain keywords before the document is being displayed to the user on the webpage. Is such a thing possible with Google Viewer.

    I see that it highlights keywords upon search very elegantly while also supporting different file formats.


  24. Ananya Ojha says:

    Can anyone tell me how to support other file extensions, like odp, odt etc ?

  25. Krunal Palaniya says:


    How can I display only a single page of pdf or xslx files?

    Thanks in advance...

  26. vignesh says:

    How to Disable print and download options in full screen view

  27. Mahesh Sharma says:

    Thanks for this helpful post, by embedding this code in website can view the pdf, doc etc document on browser.

  28. Akhilesh says:

    Hi team, document viewer is not working 10mb and above file. Is it possible to view this particular file viewer.

  29. Olga says:

    Hello! Sometimes gdocsviewer returns an empty screen. But when I update page it returns the normal content. Why is it happens and what to do? Thank you.

  30. Cloudark says:

    Great work, does this work with IE9?

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.