Embed a PDF file (and more!) in your Moodle course page by using ViewerJS. Cool!

Source: https://www.flickr.com/photos/degu_andre/5364417987/
André Gustavo Stumpf, some rights reserved.

If you ever wanted to embed PDF files inside your Moodle 2.x course page, but didn't know how to, look no further than the uber easy-to-use ViewerJS.

At the end of today's post, you will be able to view PDF files and Ms Office files direct off your Moodle course page. How? Read on!

1. Download the Javascript zip file from here.
2. Unpack the file on your computer. You will see a folder named 'ViewerJS'.
3. Upload (FTP) that folder to your webserver, preferably to www.domainname.com/moodle/ViewerJS
3. Upload one or more PDF documents to your webserver, preferably to a custome folder named pdfs. E.g, at the location www.domainname.com/moodle/pdfs
4. Create a Label resource with the example HTML code below

The softcopy code is given here:



<p>
<a target="_new" href="http://www.cambridgekidz.org/moodle/ViewerJS/#../pdfs/demodoc.pdf">PDF file (via ViewerJS)</a>
</p>

5. You can also embed a PDF window inside your course page. Here is the HTML code of another Label resource:

The softcopy for your convenience is here.

<center>
<iframe style="text-align: center;" src="http://www.cambridgekidz.org/moodle/ViewerJS/#../pdfs/demodoc.pdf" width="400" height="300" allowfullscreen="" webkitallowfullscreen="">
</iframe>
</center>

6. The result is nice.

7. If you click the "PDF file (via ViewerJS) link, a separate tab will open up with the PDF file's contents. The interface has several tools that are useful - zoom in, zoom out, full-screen, download and next/previous page.

ViewerJS is very versatile. You can use it to view Open Document Format (ODF) files. If you have Microsoft Office formats of .ppt, .pptx (PowerPoint), .xls or .xlsx (Excel spreadsheet) files, just save as "OpenDocument Format" in your office suite to be able to use it with ViewerJS.

Having said this, you may want instead to view Ms Office files directly off your coursepage without having to first save to ODF format, or without having Ms Office suite installed on your local PC. There are at least TWO ways of doing this.

(1) Use the Google Documents Viewer - you will need a Google account for this to work.

Simply add the code prefix http://docs.google.com/viewer?url= to your <a> tag. For example you could create a Label resource and in the HTML mode, use this code:

Here is the softcopy code.

<p>
<a href="http://docs.google.com/viewer?url=http://www.cambridgekidz.org/moodle/pdfs/test.txt" target="awindow">Text file via Google Docs</a>
</p>

When you click on the link, this is what you will see:

(2) Use the Google Chrome extension plugin for viewing and editing Ms Office files

Go here and install the Chrome extension.

After you have installed the extension, you can open any Ms Office file that you link to on your course page. For example, assuming you have a Label resource with the following HTML code:

<p><a target="_new" href="http://www.cambridgekidz.org/moodle/pdfs/MWordTest.docx">Ms Word demo (Chrome Extension)</a></p>

<p><a target="_new" href="http://www.cambridgekidz.org/moodle/pdfs/exceldemo.xlsx">Ms Excel demo (Chrome Extension)</a></p>

Once you click on one of the link, this is what you will see:

So there you have it. I hope you learnt something new today.

regards
Frankie Kam

If you like this post or site
a small donation would be nice but would last only a day,
otherwise leaving a comment (or a compliment) below will last me a month!