Putting ViewerJS on your website is pretty easy, and shouldn't take more than five minutes. ViewerJS is a pretty versatile document viewer that resides on your web server itself.
Running ViewerJS is as simple as making a link. You can use it to give a full screen presentation, but also for showing documents inline in your website or as a viewer for links to documents. Because of the way your browser protects itself against security risks (which is a very good thing) ViewerJS only works on documents that reside on your own server. ViewerJS is complete and self-contained - it does not rely on other services.
For using ViewerJS you don't have to change the page you want to add the document to - activating the viewer pretty much works like making a regular link. Normally when you create a link to a document on your site you would use:
For initiating ViewerJS we point the browser to the viewer which (if you followed the instructions) resides at /ViewerJS/index.html. We only need to write down /ViewerJS/, the browser will understand the rest. The next thing we need to do is tell the browser the location of the actual file we want to show.
We tell ViewerJS where it can find the document by giving the regular path/to/filename.ext (that is: the absolute path of the document counted from the 'root directory' of your webiste) like so:
In practical terms that means we indicate to the browser to go back to the top folder with #.. (if you put the directory with ViewerJS elsewhere,
(Since we are already using the regular path in the browser for pointing it to the folder with ViewerJS, we use a relative link back from that location preceded by the # character.)
That is it. In principle you don't need to change anything to the 'host' page. Of course you often want to use ViewerJS for embedding a document inside a page. For that we will use a so called iframe - really just a page within a web page. Check out the examples, and just open the source of the webpage to see how it works.
Here are the basic steps that are necessary to put ViewerJS on your website.
(If you want, you can always try to see if ViewerJS is installed correctly by going to the address bar of the browser, and inserting /ViewerJS/#.. inbetween the domain name part of your website (below it is example.org) and the rest of the path:
If that works, you can just copy that URI as well.
To embed a document in the same way as you see here:
we need to draw an iframe and then pass the same link as we had before to it. So if we have a document in folder /demo/ohm2013.odp it will look something like this:
Note that you need to set the width and the height of the iframe in your page. ViewerJS will try to use all the space you give it, but if you want to make optimal use of your screen estate make sure that you fit the window of ViewerJS to the dimensions of the document you want to show. If you don't know what to do, just try it out with some different formats.
(A4 sized documents - portrait) (1.414 : 1)
(A4 sized documents - landscape) (1 : 1.414 )
(screen sized documents) (4 : 3)
If you want to position the document to the left or right, use style="float:left;" or style="float:right;". If you want to center the document, use style="text-align:center;":
The heavy lifting in ViewerJS is done by these awesome projects:
PDF.js is a library created by Andreas Gal and others at Mozilla Labs. It is an HTML5 technology experiment that explores building a faithful and efficient Portable Document Format (PDF) renderer without native code assistance.
PDF.js is community-driven and supported by Mozilla Labs. Its goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs, and eventually release a PDF reader extension powered by PDF.js.
Visit project website
Visit project website