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, docx, xls, xlsx, ppt, pptx, pps, odt, ods, odp, sxw, sxc, sxi, wpd, pdf, rtf, txt, html, csv, tsv files it supports linked to by anchor tags.

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

Both plugins work exactly the same and has the same configuration options. I ended up going back to Google Docs Viewer for the application I was developing because it displays the document zoomed in to fit the width of the viewer by default and has a toolbar to help navigate the document unlike ZOHO viewer. However, because ZOHO Viewer supports a much large range of file types it is still likely to become very handy.

Usage


1. Add jQuery and the zohoViewer plugin to the page.
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.zohoviewer.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 ZOHO Viewer. E.g. "embed"
<a href="urltofile.pdf" class="embed">Download file</a>
<a href="urltofile.pdf" id="embedURL">Download file</a>

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

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').zohoViewer({ 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 "zohoviewer", which allow for styling all the zohoViewer 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 + '-zohoviewer'. 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.zohoviewer.v1.0.zip (v1.0, 2.2KB)

Enjoy!

Trackbacks

  1. PingBack

  2. PingBack

  3. PingBack

  4. PingBack

  5. PingBack

  6. PingBack

Comments

Display comments as (Linear | Threaded)

  1. Robert says:

    Jawish, I did have a look at both gdocviewer and zohoviewer to display a spreadsheet saved as pdf. Although the snippets work like a charm, the displayed pdf's in zohoviewer are not keeping the text in the cell columns and gdocviewer displays perfeclty lined up, but without cell borders.
    (browser using pdfviewer displys the pdfdoc correct). Therefore I assume it is not the pdf, but the presentation mechanism. Is there some setting I need to tweek? Thanks, Robert

  2. nikhil says:

    Thanx Hameed.. It is very useful viewer for me .. i will use it for my on line pdf creator.. for on line library system for college..
    thanx again .. and best of luck
    <a href="www.nidiots.co.in">www.nidiots.co.in</a>

  3. Sakina says:

    Hi. Thankyou for your post and the plugin.
    I tried it and it is working for the PDF files but not for PPT and Docx files. PPt and Docx files are being downloaded. I intend to view them as well on the website.
    Kindly help
    Thankyou

  4. Zan says:

    Excuse me. I try to use your zohoviewer plugin but it does'nt work
    even my file is exist. Or may be your plugin not support localhost?

  5. IDS_Qry says:

    Hi Jawish,
    Can we use this plugin for ajax calls?
    I have a situation that I need to display a pdf in the browser which is coming as pdf stream from the the server without reloading the page.
    Can you suggest me the best solution for this?
    Thanks in advance.

  6. sheraz says:

    hi, i am using this plugin in my CV management application. i want to view the pdf, doc or docx files in the embedded mode. The problem is that it is not displaying doc or docx files but generates the download popup to download the files. Howerver it is displaying pdf files correctly.

    Can you guide me how i can have embedded view of doc or docx files.

  7. jQuery By Example says:

    I loved your plugin and also posted about your plugin on my website.

    http://jquerybyexample.blogspot.com/2012/10/5-javascript-and-jquery-pdf-viewer-plugin.html

  8. Alexandre says:

    Nice job!
    You mean, in this case there is no way to IMPORT the content of the page over EXCEL function or Acrobat Reader or Distiller?

    Is it possible to protect the PDF or document from beeing copied?

    Thanks!

  9. Nurudeen Alimi says:

    It seems like this is not working anymore, I tried the sample code and I follow the instruction on this page but didn't work
    Please what am I missing out

  10. Amol Mane says:

    Demo version is not working even if sample pdf file is present.


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.