Are you working for eLearning projects? then you should know about Mozilla has launched PDF.js a web PDF viewer plugin. This plugin helps you to display PDF files inside HTML code. I did customized PDF.js prebuild structure for easy usage. Take a quick look at this post and it will explain you how to configure, tracking reports(Google Analytics) and monetize your PDF content with HTML page.

The plugin contains four folders called build, css, js and images with HTML files.
build
-- pdf.js
css
images
js
-- viewer.js
index.html
file.pdf
-- pdf.js
css
images
js
-- viewer.js
index.html
file.pdf
viewer.js
Just rename file.pdf with your PDF file.
var DEFAULT_URL = 'file.pdf';
var DEFAULT_SCALE = 'auto';
var DEFAULT_SCALE_DELTA = 1.1;
var UNKNOWN_SCALE = 0;
.......
.......
var DEFAULT_SCALE = 'auto';
var DEFAULT_SCALE_DELTA = 1.1;
var UNKNOWN_SCALE = 0;
.......
.......
index.html
Include your advertisement code.
<body tabindex="1">
<div>
// Display advertisement here.
</div>
<div id="outerContainer" class="loadingInProgress">
<div>
// Display advertisement here.
</div>
<div id="outerContainer" class="loadingInProgress">
Very good! Thank you :)
ReplyDeleteIts Not working ! cant view the pdf file and even on your demo..
ReplyDeletevery helpful
ReplyDeleteGreat post man....
ReplyDeleteimma give that a shot...
Now transform html article in pdf file, possible ?
ReplyDeleteNice.
ReplyDeleteplease also provide doc and docx viewer
ReplyDeleteVery nice a article. Many-many thanks to you. I hope this will very helpful for displaying pdf data in html page in specific size as well as specific location on the web page.
ReplyDeleteThe idea seems to be great. Hope other web browsers can follow suit. So we web designers can ensure the same good user experience across browsers.
ReplyDeleteUsage basic version PDF.js in your sites:
ReplyDeletehttps://github.com/wcoder/basic-pdf.js
never knowed we could monetize pdf. thanks a lot
ReplyDeleteTry live demo with modern browsers.
ReplyDeleteIt is so good. But how can i take out the download button. I just view the pdf only, can't download it. please help me.
ReplyDeletenext, how to generate pdf from php / html...
ReplyDeletewould you?
Thanks a lot for that!
ReplyDeleteThanks, great work
ReplyDeleteThanks Man
ReplyDeletehi
ReplyDeletegreat work
i like this
Nice that this is only Javascript solution
ReplyDeleteniceeeeee
ReplyDeletedoes it work locally ?
ReplyDeleteAnand
Hi, great work.
ReplyDeleteHow can change the viewer Locale ?
Thank you
Its not working on the internet explorer 7,8,9
ReplyDeletegreat job, it will be more helpful to those who are maintaining educational blogs to post their pdf files on the website by that users can view entire documnt without downloading .
ReplyDeleteYou can use I-frame as well...
ReplyDeleteThank you, this is actually something we were looking into and I didn't know it already existed or was that easy to set up. Thanks for being so generous with your scripts!
ReplyDeleteThanks bro..
ReplyDeletefor sharing this article.
Thanks Shrinivas
ReplyDeleteHi everyone, i don't think it is secured yet...i was able to download the pdf...infact their was a download button just after the print button....is there anything wrong ?
ReplyDeletecan i put pdf.js in a iframe or in a section
ReplyDeleteThis is a very good script but I really need to know how to disable the download, open and print functions. Thank you.
ReplyDeletePDF.js v1.0.21 (build: f954cde)
ReplyDeleteMessage: Unexpected server response (204) while retrieving PDF "http://localhost/testando/webpdf/standard.pdf".
Why this error?
Thanks for knoledge,
ReplyDeletecan you please tell me, how to display all thumbnail in sidebar ?
how to pass selected database file name to this default url?
ReplyDeleteHello, Nice script. But what is the cmaps folder/files for?. It semes to work with out this folder.
ReplyDeleteNS_ERROR_DOM_BAD_URI: Access to restricted URI denied i am getting this error
ReplyDeleteThank you. Do you know how can i prevent someone to download and print the pdf file with pdfjs?
ReplyDelete