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

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.

Also Read This πŸ‘‰   string formatter javascript OR JavaScript String Format or Interpolation

Include Script

Using PDF.js in a web application


<h1>PDF.js previous/Next example</h1>

<hr />
  <button id="prevlive">previous</button>
  <button id="livenext">next</button>
<br />
	<span>Page: <span id="live_number"></span> / <span id="total_count"></span></span>


var pdfurl = '';
PDFJS.workerSrc = '';

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) {
        nympsystem = null;

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

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

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

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



#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.

Also Read This πŸ‘‰   javascript wait 1 second(Delay, Sleep, Pause, & Wait)

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


Free Live Chat for Any Issue