how to use pdf.js to display pdf documents
pdf.js is a great cross platform pdf viewer solution, here I explain how to use it
Install PDF.js viewer on your server
Instructions 1 to 7 are to install node as a webserver for the PDFViewer, they not necessary if you are already running a webserver (i.e. Apache).
1) install git
sudo yum install git
2) make or use a pdf.js install directory on your server
mkdir libs/ cd libs
3) Now you have a server directory /home/user/public_html/libs, for example. Clone the git project into this directory
git clone git://github.com/mozilla/pdf.js.git pdfjs
4) there will be a new directory created called pdfjs which is the project directory, cd into this directory. Then we have to install the node server
sudo yum install nodejs
5) then run the server (in the background so we can carry on), to do this robustly I am using forever its runs the server in the background robustly, to install this we first have to install the node package manager (npm) then use npm to install forever
sudo yum install npm; sudo npm install forever --global
6) then we can start the pdf server
forever start make.js server
7) you can check that it is running with
8) then we can display the pdf with the following html code
<iframe style="width:100%;height:500px" src="http://www.mydomain.com/libs/pdfjs/web/viewer.html?file=http://www.mydomain.com/mypdf.pdf"></iframe>
You now have a nice pdf viewer for your website guests that doesn't depend on any plugins.
Using PDF.js as a fallback for native pdf viewer plugin
PDF.js is at the moment a bit buggy, (ie. printing support is not available - hopefully this will change in the future!).
In order to provide the best experience for all users we shall: use the native pdf viewer plugin (i.e. adobe) and if not available use pdf.js as a fallback.
9) Download pdfobject.min.js from the pdfobject Github site , save to lib directory
10) Add the following code to the header region of your webpage (change the width, height in the style to suit)
11) Then in the body section of your html page replace the iframe html code (from section 8) with the following html code
<div id="pdfdoc" style="width:100%;height:500px"></div>
then you are good to go!
* Code conversion to HTML friendly display format was done using the Code2HTML converter