In this article I will explain with an example, how to display (render) PDF file in Mobile 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">
 
 

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.
The resolution parameter is changed based on whether the page is viewed in a Desktop or Mobile using the IsMobile function.
Note: The IsMobile function determines whether Browser is a Desktop Browser or a Mobile Browser by testing the navigator.userAgent property against a Regular Expression.
 
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 Zoom.
    var resolution = IsMobile() ? 1.5 : 1;//Set Resolution as per Desktop and Mobile.
    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";
            pdf_container.style.height = IsMobile() ? "1200px" : "820px";
 
            //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 usingViewPort 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);
        });
    };
 
    function IsMobile() {
        var r = new RegExp("Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini");
        return r.test(navigator.userAgent);
    }
</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; overflow: auto }
</style>
 
 

Screenshots

Desktop Browser

Display (Render) PDF file in Mobile Browser using JavaScript
 

Mobile Browser

Display (Render) PDF file in Mobile Browser using JavaScript
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge   FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code