The PDF link on anchor tag for mobile forces PDF to download on mobile. To prevent that here is a small test work as HTML5 PDF Viewer for mobile devices. It also works on all HTML5 compatible browsers.

To build this tool a library called PDF.js used which is managed by Mozilla. In the whole tool (actually just a web page) there are HTML5, CSS3 and JavaScript are used. So after building this you can allow all mobile users to preview PDF file on your website’s web page. It allows preview without saving PDF file on mobile and using any other application on mobile. A HTML5 compatible mobile browser is enough for preview PDF.

Let’s build a HTML5 PDF Viewer

Firstly let’s create a index.php file which will display preview of PDF.

<!DOCTYPE html>
<html>
<head>
	<title>PDF Test</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js"></script>
</head>
<body>
	<div id="canvases"></div>
	<script type="text/javascript" src="./script.js"></script>
	<style type="text/css">
		body {
			background-color: #535759;
		}
		#canvases canvas {
			margin: 20px auto;
			display: block;
		}
	</style>
</body>
</html>

Here on this index.html file you can notice that two JavaScript files linked one on <head> and another before </body>. The one on <head> is PDF.js library file which is linked/imported from cdnjs. and one before </body> is script.js which will help on use PDF.js to preview PDF.

Linked/Imported PDF.js library on index.html.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js"></script>

At the end of index.html there are some CSS style added which helps UI to look similar to Desktop Google Chrome’s default PDF viewer.

<style type="text/css">
  body {
    background-color: #535759;
  }
  #canvases canvas {
    margin: 20px auto;
    display: block;
  }
</style>

At the beginning of <body> there are an empty div which is the container of PDF viewer, where all pages will be display for preview.

<div id="canvases"></div>

Below is the code of script.js file which is linked/imported before </body>.

var url = './Sample_Document_Lorem_Ipsum.pdf';

var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';

var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 1.5;

function renderPage(num, canvas) {
  var ctx = canvas.getContext('2d');
  pageRendering = true;
  // Using promise to fetch the page
  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport({scale: scale});
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Render PDF page into canvas context
    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);

    // Wait for rendering to finish
    renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
        // New page rendering is pending
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });
}

pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;

  const pages = parseInt(pdfDoc.numPages);

  var canvasHtml = '';
  for (var i = 0; i < pages; i++) {
  	canvasHtml += '<canvas id="canvas_' + i + '"></canvas>';
  }

  document.getElementById('canvases').innerHTML = canvasHtml;

  for (var i = 0; i < pages; i++) {
  	var canvas = document.getElementById('canvas_' + i);
  	renderPage(i+1, canvas);
  }
});

In this code firstly come the declaration of variable url which is relative path of PDF file which needs to be previewed. You may also use there any full PDF URL.

var url = './Sample_Document_Lorem_Ipsum.pdf';

The GlobalWorkerOptions from PDF.js is used to import next file of PDF.js library which is also imported from cdnjs.

var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';

Then declaration of all variables.

var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 1.5;

The page rending function is written on that script.js which is being called for each and every page available on PDF, so this function can render preview of page on canvas.

function renderPage(num, canvas) {
  var ctx = canvas.getContext('2d');
  pageRendering = true;
  // Using promise to fetch the page
  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport({scale: scale});
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Render PDF page into canvas context
    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);

    // Wait for rendering to finish
    renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
        // New page rendering is pending
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });
}

The last section of code on file is to fetch PDF from server and create canvas for each page and add all canvas to div which was coded on index.html for display preview of PDF, then for each page with related canvas one by one renderPage function is being called to display one by one preview of PDF pages.

pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;

  const pages = parseInt(pdfDoc.numPages);

  var canvasHtml = '';
  for (var i = 0; i < pages; i++) {
  	canvasHtml += '<canvas id="canvas_' + i + '"></canvas>';
  }

  document.getElementById('canvases').innerHTML = canvasHtml;

  for (var i = 0; i < pages; i++) {
  	var canvas = document.getElementById('canvas_' + i);
  	renderPage(i+1, canvas);
  }
});

And here, all done! You can check GutHub Repo if any help needed on code.