When writing business web applications you often need to show PDF files in your application. But this requires that the user has an installation of a PDF viewer (e.g. Adobe Reader) and the browser plugin is activated. With PDF.js there is a chance to provide reliable and consistent PDF viewing capabilities in your application. This post provides some background information and shows how to integrate the PDF.js viewer into your own application.
About PDF.js
PDF.js, mainly developed by Mozilla, provides a JavaScript library that makes it possible to render PDF files in a browser without using a browser plugin. This library does the rendering but isn’t responsible for providing any other functionality to the user like navigation, zoom levels or printing.
Additionally, there’s a complete viewer (implemented using html, CSS and JavaScript) that does the things mentioned above. A demonstration of this viewer is hosted on the project’s web page.
As PDF.js uses many technologies provided by modern browsers only, it doesn’t work with old browsers like Internet Explorer 8. For details on that you can refer to the project’s compatibility list.
License
PDF.js is licensed under the “Apache License, Version 2.0” that makes it possible to use it in your own application.
Be aware that the PDF.js viewer also includes files of the Adobe CMap project. These files are available under the terms of a different license.
Limitations
PDF.js is implemented in JavaScript and runs in a browser. This results in some limitations, so don’t expect every feature of PDF files to be supported or working correctly. But in my experience PDF files containing text and images only work very well.
Getting the PDF.js viewer
The README file of PDF.js describes how to build a version on your own.
You can also take a pre-built version from the “gh-pages” branch of the GitHub project (the branch can be downloaded as zip file). But be aware that this version isn’t minified and therefore not as efficient as possible. If using the version from the “gh-pages” branch, you’ll need to put the folders “web” (excluding the example PDF file) and “build” into your own web application. These are only static files that need to be downloaded by the browser, so no special server-side technology is needed.
Necessary adjustments
On the top of the file web/viewer.js you can adjust several settings. One setting is the default PDF file that is shown if no other file is specified. This is set by default to a value that is useful for the demo hosted on the project’s web page. You should change this to a reasonable value or about:blank to show nothing by default.
If you want the pdf.js and pdf.worker.js files to be in a different location than the build folder, you have to adjust two things:
The pdf.js file is included in the web/viewer.html file:
<script type="text/javascript" src="../build/pdf.js"></script>
The pdf.worker.js is included in the web/viewer.js file:
PDFJS.workerSrc = '../build/pdf.worker.js';
Showing PDF files using the PDF.js viewer
This is my favorite part as it is almost trivial… Simply open the web/viewer.html with a parameter file set to the URL of your PDF file. An example URL could look like this:
http://myapp.mycompany.com/web/viewer.html?file=http://myapp.mycompany.com/my-PDF-file.pdf
As you simply show an html file, you are free to embed the PDF.js viewer as IFrame, popup or opening it as new window/browser tab.
Some more thoughts
As current versions of Google Chrome and Mozilla Firefox already natively support showing PDF files, it could be unnecessary to force the usage of the self-hosted PDF.js viewer as this results in additional files to be downloaded. As the PDF viewer included in Firefox is based on the PDF.js viewer, the user potentially won’t even see the difference. So a valid option to provide best and efficient support for the users is to use the built-in PDF viewer of the browser if you are sure one is available and only use PDF.js for uncertain cases (e.g. users with Internet Explorer).
But it could also be desirable to use PDF.js on all browsers to ensure a consistent look and behaviour for all users.
If you need to support Internet Explorer 8, you should provide a fallback for those users. For example you could use an IFrame directly pointing at the PDF’s URL. If the user has a PDF viewer, it will be used. If not the file can be downloaded by the user as last fallback.
Can i have an example of using pdf.js in an IFrame
Hi ! If you got any, then can you please mail it to me at kaverisingh21 at gmail.com?
kaveri do you have any idea that how to use to Pdf.js to save actualy save whole html file as PDF after include PDF.js library into application
The details highly depend on the framework you use for your web application.
In general, the html source code should look similar to this:
<iframe src="http://mozilla.github.io/pdf.js/web/viewer.html?file=http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf" width="500px" height="400px" />
Hahaha, some time we make the stuff much difficult and the easy solution is alway in front of your nose. It’s like google doc embedded pdf…Thanks.
Thanks seems it does the trick
Ex. “http://myapp.mycompany.com/web/viewer.html?file=http://myapp.mycompany.com/my-PDF-file.pdf”
Good find, thanks!
Hi Again :/
do you have an idea about how to proceed if ever i have got raw data and i would like pdf.js to build it up.
Try pdfkit.org
We use this viewer to view PDF file. We removed all controls (Save, print etc). Does our PDF file get saved somewhere on client machine,may be in cache or Temporary internet files etc?
Purpose of asking this question is that is there any possibility to retrieve the file which is displayed in this viewer?
Hello Shashi, could you give me a hand regarding removing the buttons? I would like a viewer which only displayed the PDF, anything else from the viewer.
I’m not sure if this is supported at all. PDF.js is described as “A general-purpose, web standards-based platform for parsing and rendering PDFs.” on its website (http://mozilla.github.io/pdf.js/).
This PDF.js is not supported by Internet explorer please reply me is there is another alternative or how can I overcome fro this problem.
@Shashi: As PDF.js seems to not load the PDF file at once (Range header is set for the HTTP requests) I guess it won’t get cached on the client.
If the browser puts the ranges into some tmp file is most probably depending on the browser you use. But I guess it would be hard to reconstruct the whole PDF file from this data.
Great article! Helped me a lot.
I have a question : Is there a way to use canvas or div instead of iframe?
@seema: PDF.js is supported by newer IE versions. see the following pages for details:
https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#what-browsers-are-supported
https://github.com/mozilla/pdf.js/wiki/Required-Browser-Features
@McB: You can use the PDF.js API to create your own viewer based on a canvas. The “Learning” section on the project page is a good starting point for this:
https://github.com/mozilla/pdf.js#learning
Steffen, thank you very much for the article. I d like to use the viewer but I get from the server the pdf file in raw data. By using some objects like Uint8Array and Blob I m able to download the file straight to the client machine but obviously i d like to give the user the option of looking at the file before saving it. Is there a way to pass the blob to viewer.html instead of the url ?. I have found pieces of code like:
var blob = new Blob(data, {type: “octet/stream”}),
url = window.URL.createObjectURL(blob);
window.open(viewerUrl + “?file=” + url);
But that doesn’t seem to work. I guess this is related to the question Arvin asked before.
Thanks In advance
İt may be late for you Luis, But may be usefull for other people.
here how I send Blob data to viewer.html in iframe.
var blob_url = URL.createObjectURL(blob);
$(”, {
src: ‘pdfjs/web/viewer.html?file=’ + blob_url,
id: ‘pdfjs-content’,
frameborder: 0,
scrolling: ‘no’
}).appendTo(‘.panel-body’);
Hi, how would you force chrome and IE to use pdf.js instead of built-in when embedding via iframe? Actually IE is using some acrobat plugin.
I’ve picked up the dist version os pdf.js, copied all web/ files to my server, changed the paths accordingly and tested with firefox, chrome and ie. None seemed to ask for any source file besides viewer.html.
Thanks.
Is it possible to ONLY view the file, and NO Download its?
Steffen,
I uploaded all files from git to a folder called ‘pdf’. When I go to the following page (using my domain) the page is blank and nothing happens. Do you happen to know why?
http://www.mydomain.com/pdf/web/viewer.html?file=http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf
When I go to http://www.mydomain.com/pdf/web/viewer.html via my browser it is blank as well, but all the files are there in FTP. I’ve also verified that both of the lines of codes were included and they already were.
Hi did you find any solution to this problem
This topic, Can support with excel file?
Thanks.
Hello,
How can i restruecture the folders, like put all js files together including pdf.js and pdf.worker.js ??
A well written article. Thanks for sharing Steffen.
Hi guys!
I really enjoy this article, but i have an issue to solve:
I have an PDF embedded in an tag and i need to change the page number of this PDF using javascript, working like an external bookmark.
Someone can help me?
hello
i also want to solve this issue.is there any answer to this question?
Hi @Luis Santos did you able to view pdf binary with pdf.js
Hi guys!
When you load complete pdf document in mobile safari browser it’s running out of memory and browser crashes. So, I am trying to load a single page using pdf.js, facing difficulty on it.
Is it possible to load single page and if how ?
I want all features to be worked when i render single page.
PDF Js lacks features like Search in mobile devices . Can anyone provide explanation for this
HI
I am using pdf.js . Is their any way to prevent user to download/Print pdf file. i just want him/her to view the file not download.
Any Help ????
Thanks
Hi, Can i get an example where I can control zooming of pdf with javascript, which would enable vertical and horizontal scroll in the container (i.e div)
Hello, is there a way to use pdf.js to prevent user from doing the following on downloaded pdf file: save as, copy, print, reading the pdf file on another computer or device, other than the one used in downloading the pdf file?
Buttons can be disabled in the /web/viewer.html of the PDF.js-package by adding the CSS style=”display:none” to it.
+++
Please also consider the cross domain policy of PDF.js (and modern browsers). You can access a file by using:
http://myapp.mycompany.com/web/viewer.html?file=http://myapp.mycompany.com/web/my-PDF-file.pdf
but you might run into trouble with this:
http://myapp.mycompany.com/web/viewer.html?file=http://www.othercompany.com/pdf-file.pdf
or even this:
http://myapp.mycompany.com/web/viewer.html?file=http://www.mycompany.com/my-PDF-file.pdf
Hi,
I want to disable print from right click menu, please let me know how to do that
Thanks
Srikanth
How can we show PDF files already downloaded?
Like in a Android WebApp !
“file:///localstorage/…/xyz.pdf”
Hi,
I am using pdf.js in an application which is hosted on secure server (https://). I have the same source code hosted on two different websites. Under one, the https:// protocol opens the pdf file in the viewer but other case gives an error:
Message: Unexpected server response (0) while retrieving the pdf file “https://……pdf”
Can someone guide why this should be an issue?
I need a module to prevent downloading but offer viewing of the pdf’s on the site. If the user picks a pdf to view, in every browser i have tried it either offers to save/download -view-etc or simply downloads without asking then opens in default viewer. Would this provide a way to avoid this by viewing in download stream as it used to be?
I have been trying to get the viewer.html to work in an iFrame and have been unsuccessful. Can anyone tell me why the link works but the iframe gives me javascript errors (in 4 different js files) even though these lines are right beside each other?
Alright – that did not work either. If you want to see the code (as simple as it is) please let me know how to post it without it creating a link.
Apparently the issue is that even though I was using IE 11 it was in IE 7 and PDF.js does not work on anything less than IE 9 mode.
This is pretty good. It’s so easier in PHP and I’m using it.
Hi,
Anybody knows how to display a PDF from database (BLOB), as Luis Santos asked previously. I have my pdfs stored in the DB not external OS files.
Regards,
Omar
hello i need some snippet on pdf viewer basing on andriod smart phone browsers
is it possible to navigate the pdf using bookmark or named destination
Hello,
Currently, the pdf.js only show pdf as canvas, you can’t select the text on the pdf file. But when I run the viewer.html, I can select the text.
How can I build a custom viewer only through pdf.js and other file?
Thank you for posting this. This is really good.
I am working on an application that can read, render and edit a PDF page.
I am at a point where I would like to read the text/images from the PDF (may be by using a template) and put it in a text box, so that the user can edit the text or replace the image with another image. After editing, user should be able to create a new PDF with the changes.
I really appreciate your help in this matter. Thanks in advance.
– Sagar
hello Sagar can you plz give a demo of your project
But how to set language when I use viewer.html? the hash elment way doesn’t work.