Build a HTML5 PDF Document Viewer Using Mozilla PDF.js Library in Browser Using Javascript Full Project For Beginners

You are currently viewing Build a HTML5 PDF Document Viewer Using Mozilla PDF.js Library in Browser Using Javascript Full Project For Beginners


Welcome folks today in this blog post we will be building a html5 pdf document viewer using mozilla pdf.js library using javascript. All the full source code of the application is given below.



Get Started



In order to get started you need to make an index.html file and copy paste the following code




<script src="//"></script>

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

  <button id="prev">Previous</button>
  <button id="next">Next</button>
  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>

<canvas id="the-canvas"></canvas>



Now make a style.css file and copy paste the following code




#the-canvas {
  border: 1px solid black;
  direction: ltr;



Now make a script.js file and copy paste the following code




// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = '';

// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];

// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//';

var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 0.8,
    canvas = document.getElementById('the-canvas'),
    ctx = canvas.getContext('2d');

 * Get page info from document, resize canvas accordingly, and render page.
 * @param num Page number.
function renderPage(num) {
  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
        pageNumPending = null;

  // Update page counters
  document.getElementById('page_num').textContent = num;

 * If another page rendering in progress, waits until the rendering is
 * finised. Otherwise, executes rendering immediately.
function queueRenderPage(num) {
  if (pageRendering) {
    pageNumPending = num;
  } else {

 * Displays previous page.
function onPrevPage() {
  if (pageNum <= 1) {
document.getElementById('prev').addEventListener('click', onPrevPage);

 * Displays next page.
function onNextPage() {
  if (pageNum >= pdfDoc.numPages) {
document.getElementById('next').addEventListener('click', onNextPage);

 * Asynchronously downloads PDF.
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;
  document.getElementById('page_count').textContent = pdfDoc.numPages;

  // Initial/first page rendering



Now if you open the index.html file inside the browser you will see the below screenshot


Leave a Reply