JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Use latest PDF.js build from Github -->
<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>

  <div>
    <button id="prev" onclick="goPrevious()">Previous</button>
    <button id="next" onclick="goNext()">Next</button>
    &nbsp; &nbsp;
    <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
  </div>

  <div>
    <canvas id="the-canvas" width="700" style="border:1px solid black"></canvas>
  </div>

JavaScript

//
// NOTE:
// Modifying the URL below to another server will likely *NOT* work. Because of browser
// security restrictions, we have to use a file server with special headers
// (CORS) - most servers don't support cross-origin browser requests.
//
var url = 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf';

//
// Disable workers to avoid yet another cross-origin issue (workers need the URL of
// the script to be loaded, and currently do not allow cross-origin scripts)
//
PDFJS.disableWorker = true;

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

//
// Get page info from document, resize canvas accordingly, and render page
//


function renderPage(num) {
    // Using promise to fetch the page
    pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);
        canvas.height = viewport.height;
        // Render PDF page into canvas context
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };
        page.render(renderContext);
    });

    // Update page counters
    document.getElementById('page_num').textContent = pageNum;
    document.getElementById('page_count').textContent = pdfDoc.numPages;
}

//
// Go to previous page
//


function goPrevious() {
    if (pageNum <= 1) return;
    pageNum--;
    renderPage(pageNum);
}

//
// Go to next page
//


function goNext() {
    if (pageNum >= pdfDoc.numPages) return;
    pageNum++;
    renderPage(pageNum);
}

//
// Asynchronously download PDF as an ArrayBuffer
//
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
    pdfDoc = _pdfDoc;
    renderPage(pageNum);
});