In this article I will explain with an example, how to solve the problem of HTML embed Tag not displaying PDF file in Mobile Browsers.
HTML embed Tag does work in Desktop browsers but it does not work in Mobile browsers and hence using PDF.js JavaScript plugin is used.
 
 
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.
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 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);
        });
    };
 
    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
[Solved] HTML embed Tag not displaying PDF file in Mobile Browsers
 
Mobile Browser
[Solved] HTML embed Tag not displaying PDF file in Mobile Browsers
 
 
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
View Demo
 
 
Downloads
Download Code