How to display pdf file in HTML – PDF Viewer HTML5 Example

PDF is a simple Reader in JavaScript
PDF.js File is a simple Portable Document Format(.doc) (PDF File) viewer HTML Browser that is created with HTML5.

PDF.js File is simple community-driven and version to supported by Supported Mozilla Labs. Our goal is to all of the create a simple dynemic view, web parfect-based view platform for all the data img format parsing and rendering file of PDFs.

PDF.js File is an simple open source more easy project and always view side to looking for new more contributors.

Include Script

Using PDF.js in a web application

HTML

PDF.js previous/Next example



	
  previous
  next


	Page:  / 

Script.js

var pdfurl = 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf';
PDFJS.workerSrc = 'http://mozilla.github.io/pdf.js/build/pdf.worker.js';

var livePdf = null,
pdfnumber = 1,
pageRendering = false,
nympsystem = null,
scale = 0.8,
canvas = document.getElementById('live-canvas'),
ctx = canvas.getContext('2d');

function renderPage(number) {
  pageRendering = true;
  livePdf.getPage(number).then(function(page) {
    var viewport = page.getViewport(scale);
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);

    renderTask.promise.then(function() {
      pageRendering = false;
      if (nympsystem !== null) {
        renderPage(nympsystem);
        nympsystem = null;
      }
    });
  });

  document.getElementById('live_number').textContent = pdfnumber;
}

function queueRenderPage(number) {
  if (pageRendering) {
    nympsystem = number;
  } else {
    renderPage(number);
  }
}

function onprevlivePage() {
  if (pdfnumber = livePdf.numberPages) {
    return;
  }
  pdfnumber++;
  queueRenderPage(pdfnumber);
}
document.getElementById('livenext').addEventListener('click', livelivenextPage);

PDFJS.getDocument(pdfurl).then(function(livePdf_) {
  livePdf = livePdf_;
  document.getElementById('total_count').textContent = livePdf.numberPages;

  renderPage(pdfnumber);
});

style.css

#live-canvas {
  border:1px solid black;
}

A general-purpose or simple way, web application standards-based simple platform for parsing all the Data content and rendering PDFs -files. An introduction to PDF.js Demo with examples.
There are The Following 3 type of PDFs (Layer)Concept.
1.Core
2.Display
3.Viewer

To use File PDF.js in a web application or mobile apps we can choose to use a pre-built version of the library or to build it simple from source.$ npm install

Example

Example