JSFiddle - React, Tailwind, and code Playground

by prateekbansal07

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
    <script type="text/javascript" src="https://mozilla.github.io/pdf.js/build/pdf.worker.js"></script>


</head>

<body>

<canvas id='the-canvas'></canvas>
</body>

CSS

.pr { font-family: sans-serif; font-weight: bold; }
.prl { font-style: italic; font-weight: normal; }

JavaScript

$(document).ready(function () {
    var url = "https://github.com/mozilla/pdf.js/blob/63471bcbbeee3fc1c6b1df988174640a124f097a/test/pdfs/tracemonkey.pdf";

// Asynchronous download PDF
pdfjsLib.getDocument(url)
  .then(function(pdf) {
    return pdf.getPage(1);
  })
  .then(function(page) {
    // Set scale (zoom) level
    var scale = 1.5;

    // Get viewport (dimensions)
    var viewport = page.getViewport(scale);

    // Get canvas#the-canvas
    var canvas = document.getElementById('the-canvas');

    // Fetch canvas' 2d context
    var context = canvas.getContext('2d');

    // Set dimensions to Canvas
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Prepare object needed by render method
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };

    // Render PDF page
    page.render(renderContext);
  });
  })