[Working]Mozilla PDF.js| Render PDF in Canvas using Javascript (Without worker.js)

HTML5 Render PDF in Website

Here I'm going to explain how you can display full PDF in your website using HTML5 canvas control. Now a days, we are using Mozilla's most popular PDF.js. And you can download the tutorial from below.

Mozilla pdf.js HTML5 Canvas render
PDF.js

How to use PDF.js?

There are lot of plugins available for PDF.js script, and also there are different methods can be used to render the PDF too. But this is a best light method to render PDF in your website or webpage. Just need to included two javascript files like below.

 
<script type="text/javascript" src="pdf.js"></script>
<script type="text/javascript" src="pdf.worker.js"></script>

and use below javascript code to render the PDF

 
function renderPDF(url, canvasContainer, options) {

    var options = options || { scale: 1 };
        
    function renderPage(page) {
        var viewport = page.getViewport(options.scale);
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        canvasContainer.appendChild(canvas);
        
        page.render(renderContext);
    }
    
    function renderPages(pdfDoc) {
        for(var num = 1; num <= pdfDoc.numPages; num++)
            pdfDoc.getPage(num).then(renderPage);
    }

    PDFJS.disableWorker = true;
    PDFJS.getDocument(url).then(renderPages);

}   

In the above function new canvas is created and append to a div tag. You can see options there, scaling will determine the quality of the PDF to be rendered (also size), increase the scaling to achieve big and quality rendered PDF in your web page.

You can download full demo from here.
(Please open the web page in Mozilla Firefox to work it locally). If you have any doubts, just comment here.

Benefits of the Methods

  1. Light and faster than other methods like worker.js and viewer.html
  2. Render exact PDF in browser
  3. No font distortions will happen
  4. Excluded worker js file
  5. All pages in the PDF will be rendered
[Working]Mozilla PDF.js| Render PDF in Canvas using Javascript (Without worker.js) [Working]Mozilla PDF.js| Render PDF in Canvas using Javascript (Without worker.js) Reviewed by TechDoubts on 11:06 PM Rating: 5

5 comments:

  1. Hi!
    Thanks for your article.
    I would ask if you can add to this method controls as shown in the demo?

    ReplyDelete
    Replies
    1. Sorry I did not understand what you are asking.. Please make it clear.

      Delete
    2. I mean controlls button as here:
      http://prntscr.com/dxmmma

      Delete
  2. Or here: https://mozilla.github.io/pdf.js/web/viewer.html

    ReplyDelete
    Replies
    1. Oh I got it, here just explained how to display PDF simply in HTML5 Canvas. Also if you need that controls, you need all files from the plugin to work with viewer.html. Also it is more complex PDF viewer (it contains lot of files more than mega bytes, it will slow your application). My example is for single page or small sized PDF's. I think you got the answer?

      Delete

Powered by Blogger.