In this article I will explain with an example, how to display (render) PDF file in Browser using JavaScript.
 
 
PDF.js plugin
The PDF file will be displayed (rendered) in Browser using PDF.js JavaScript plugin.
The following files of PDF.js JavaScript plugin will be used.
1. pdf_viewer.min.css
2. pdf.min.js
3. pdf.worker.min.js
 
 
HTML Markup
The following HTML Markup consists of a Button and an HTML DIV. The Button has been assigned with a JavaScript OnClick event handler.
When the Preview Button is clicked, the PDF is displayed in the HTML DIV.
<input type="button" id="btnPreview" value="Preview PDF Document" onclick="LoadPdfFromUrl('PDFs/Sample.pdf')" />
<hr />
<div id="pdf_container"></div>
 
 
JavaScript Implementation
First, the JavaScript and CSS files are inherited for the PDF.js JavaScript plugin.
When the Preview Button is clicked, the LoadPdfFromUrl function is called.
Inside the LoadPdfFromUrl function, first the count of the pages of the PDF are read and then a loop is executed and the RenderPage function is called for each PDF page.
Inside the RenderPage function, a HTML5 Canvas element is created and the PDF page is rendered on the HTML5 Canvas.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf_viewer.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    var pdfjsLib = window['pdfjs-dist/build/pdf'];
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
    var pdfDoc = null;
    var scale = 1; //Set Scale for zooming PDF.
    var resolution = 1; //Set Resolution to Adjust PDF clarity.
 
    function LoadPdfFromUrl (url) {
        //Read PDF from URL.
        pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
            pdfDoc = pdfDoc_;
 
            //Reference the Container DIV.
            var pdf_container = document.getElementById("pdf_container");
            pdf_container.style.display = "block";
 
            //Loop and render all pages.
            for (var i = 1; i <= pdfDoc.numPages; i++) {
                RenderPage(pdf_container, i);
            }
        });
    };
    function RenderPage(pdf_container, num) {
        pdfDoc.getPage(num).then(function (page) {
            //Create Canvas element and append to the Container DIV.
            var canvas = document.createElement('canvas');
            canvas.id = 'pdf-' + num;
            ctx = canvas.getContext('2d');
            pdf_container.appendChild(canvas);
 
            //Create and add empty DIV to add SPACE between pages.
            var spacer = document.createElement("div");
            spacer.style.height = "20px";
            pdf_container.appendChild(spacer);
 
            //Set the Canvas dimensions using ViewPort and Scale.
            var viewport = page.getViewport({ scale: scale });
            canvas.height = resolution * viewport.height;
            canvas.width = resolution * viewport.width;
 
            //Render the PDF page.
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport,
                transform: [resolution, 0, 0, resolution, 0, 0]
            };
 
            page.render(renderContext);
        });
    };
</script>
 
 
CSS
The following CSS needs to be added to the HEAD section of the page.
<style type="text/css">
    #pdf_container { background: #ccc; text-align: center; display: none; padding: 5px; height: 820px; overflow: auto; }
</style>
 
 
Screenshot
Display (Render) PDF file in Browser using JavaScript
 
 
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads