View PDF file using JS

You have had for sure the situation when it was needed to display the content of PDF file on your webpage. In most cases the biggest problem is to get this solution work onto all the devices and without any unnecessary delay.

Naive and oldschool solution

For a very long time the only suitable solution was to insert EMBED element containing directly the URL of PDF file. The browser will then try to execute the corresponding extension to display the content. In the most cases it will try to start Adobe Reader. Solution is good, but onto devices where the browser extension to display the PDF confent is missing (some mobile devices) it will display nothing.

Code for this solution will look like this:

<embed src="http://gach.cz/wp-content/uploads/2015/06/love-banana-minions.pdf" type="application/pdf" width="630" height="275"></embed>

This will probably show you something like below (if PDF browser extension is present):

Pure JS way

Library PDF.js can be used in 2 ways. You may be able to use NodeJS pdf viewer as seen in this demo example. To get it work it is needed to run NodeJS script onto server side. The browser itself cannot be modified easily. This solution is fine if you do not need to integrate the PDF preview not directly into your webpage.

But in most cases it is needed to somehow render the PDF into your page. In this case we use the second approach and utilize mozilla / pdf.js. This solution uses the library which offers the capabilities to do basic PDF modifications as rendering, pagination, zoom, etc. It is fine, that all of those can be used very flexible together with your own JavaScript code. The bad thing is that you need to implement all the actions like pagination or zoom.

Some easy example without any advanced functions will look like this:

<canvas id="the-canvas" style="border: 1px solid black"></canvas>

<script src="http://gach.cz/wp-content/uploads/2015/06/pdf1.js"></script>
<script>
  //
  // If absolute URL from the remote server is provided, configure the CORS
  // header on that server.
  //
  var url = 'http://gach.cz/wp-content/uploads/2015/06/love-banana-minions.pdf';
  //
  // Disable workers to avoid yet another cross-origin issue (workers need
  // the URL of the script to be loaded, and dynamically loading a cross-origin
  // script does not work).
  //
  // PDFJS.disableWorker = true;
  //
  // In cases when the pdf.worker.js is located at the different folder than the
  // pdf.js's one, or the pdf.js is executed via eval(), the workerSrc property
  // shall be specified.
  //
  PDFJS.workerSrc = 'http://gach.cz/wp-content/uploads/2015/06/pdf.worker1.js';
  //
  // Asynchronous download PDF
  //
  PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
    //
    // Fetch the first page
    //
    pdf.getPage(1).then(function getPageHelloWorld(page) {
      var scale = 1;
      var viewport = page.getViewport(scale);
      //
      // Prepare canvas using PDF page dimensions
      //
      var canvas = document.getElementById('the-canvas');
      var context = canvas.getContext('2d');
      canvas.height = 275;
      canvas.width = 630;
      //
      // Render PDF page into canvas context
      //
      var renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      page.render(renderContext);
    });
  });
</script>

This will lead to display the PDF file in pure JavaScript way:

Do it Google way!

Google makes it possible to display the PDF file and embed it into your site using iframe. Lot of people does not know about this solution. Personaly I think it is the easies and prefered solution in case you do not need any advanced actions to the PDF file. Also as a benefit this approach support much more file types then PDF. You should be able (according to documentation) preview and embed Powerpoint or Word documents preview into your webpage.

It is easy as:

<iframe style="width: 630px; height: 275px;" src="http://docs.google.com/gview?url=http://gach.cz/wp-content/uploads/2015/06/love-banana-minions.pdf&amp;embedded=true" width="300" height="150" frameborder="0"></iframe>

.. and outputs: