Integrating PDF.js as PDF viewer in your web application

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.

Short URL for this post: https://wp.me/p4nxik-23X
This entry was posted in Web as a Platform and tagged , , , , , , . Bookmark the permalink.

49 Responses to Integrating PDF.js as PDF viewer in your web application

  1. Arvind Balgobin says:

    Can i have an example of using pdf.js in an IFrame

  2. Steffen Schäfer Steffen Schäfer says:

    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" />

  3. Arvind Balgobin says:

    Thanks seems it does the trick

  4. lookpat says:

    Ex. “http://myapp.mycompany.com/web/viewer.html?file=http://myapp.mycompany.com/my-PDF-file.pdf”

    Good find, thanks!

  5. Arvind Balgobin says:

    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.

  6. Shashi says:

    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?

    • Francesc says:

      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.

  7. Steffen Schäfer Steffen Schäfer says:

    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/).

  8. seema says:

    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.

  9. Steffen Schäfer Steffen Schäfer says:

    @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.

  10. McB says:

    Great article! Helped me a lot.
    I have a question : Is there a way to use canvas or div instead of iframe?

  11. Steffen Schäfer Steffen Schäfer says:

    @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

  12. Luis Santos says:

    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

    • Anar Musayev says:

      İ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’);

  13. Lourenço says:

    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.

  14. Andrea says:

    Is it possible to ONLY view the file, and NO Download its?

  15. Emmanuel says:

    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.

  16. lookpat says:

    This topic, Can support with excel file?

    Thanks.

  17. nizarbasbous says:

    Hello,
    How can i restruecture the folders, like put all js files together including pdf.js and pdf.worker.js ??

  18. Baki Öztepe says:

    A well written article. Thanks for sharing Steffen.

  19. Oldemar says:

    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?

  20. Arvind Bhoir says:

    Hi @Luis Santos did you able to view pdf binary with pdf.js

  21. Sampath Kumar says:

    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.

  22. Sampath Kumar says:

    PDF Js lacks features like Search in mobile devices . Can anyone provide explanation for this

  23. AnkurChhabra says:

    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

  24. Deepak says:

    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)

  25. Victor says:

    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?

  26. Thomas says:

    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

  27. Srikanth says:

    Hi,

    I want to disable print from right click menu, please let me know how to do that

    Thanks
    Srikanth

  28. WimK says:

    How can we show PDF files already downloaded?
    Like in a Android WebApp !

    “file:///localstorage/…/xyz.pdf”

  29. SM says:

    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?

  30. mike griffin says:

    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?

  31. Andrew says:

    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?

    • Andrew says:

      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.

    • Andrew says:

      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.

  32. Sajjad says:

    This is pretty good. It’s so easier in PHP and I’m using it.

  33. omarsawalhah says:

    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

  34. kahuma says:

    hello i need some snippet on pdf viewer basing on andriod smart phone browsers

  35. ganku007 says:

    is it possible to navigate the pdf using bookmark or named destination

  36. Le Son says:

    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?

  37. Sagar says:

    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

  38. balmydrizzle says:

    But how to set language when I use viewer.html? the hash elment way doesn’t work.

Leave a Reply