Google Docs Viewer plugin for jQuery

< Thaana Text Render class for PHP 5 - v1.0 | ZOHO Viewer plugin for jQuery >

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!

This entry was posted by Jaa on Monday, February 21. 2011 at 18:00. You can leave a response, or trackback from your own blog.

Defined tags for this entry: gdocsviewer, google docs viewer, javascript, jquery, plugin, projects, release

Related entries by tags:

Trackbacks

Trackback specific URI for this entry

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

Weblog: Jaa's Blog
Tracked: Feb 22, 17:57
PingBack

Weblog: forum.ceviz.net
Tracked: Dec 05, 21:58
PingBack

Weblog: www.jquery4u.com
Tracked: Apr 30, 21:05
PingBack

Weblog: www.jquery4u.com
Tracked: Apr 30, 21:05
PingBack

Weblog: freebiesdesign.com
Tracked: Jun 26, 06:34
PingBack

Weblog: freebiesdesign.com
Tracked: Jun 26, 06:34
PingBack

Weblog: freebiesdesign.com
Tracked: Jun 26, 06:34

Comments

Display comments as (Linear | Threaded)

Soup says:

#1 2011-02-23 17:14 (Reply)

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?
Pashminu Mansukhani says:

#1.1 2013-03-19 15:57 (Reply)

Will this work perfectly on iOS and Android platforms?
Ivano says:

#2 2011-09-28 07:33 (Reply)

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

#3 2011-10-08 18:34 (Reply)

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.
Marcelo says:

#4 2012-04-10 20:38 (Reply)

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?
RepublicOfZen says:

#5 2012-10-26 11:09 (Reply)

Thanks for this.

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

#6 2013-01-30 14:49 (Reply)

Hello,

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

Regards,
Raghavendra
Electron says:

#7 2013-05-11 02:43 (Reply)

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

Add Comment

Name
Email
Homepage
In reply to
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.
	Remember Information? Subscribe to this entry