CODEWITHSUNDEEP
javascripthtmlpdf.js
Ananth Kishore
Ananth Kishore

Reputation: 381

reference error: PDFJS is not defined when loading a pdf

I am trying to use pdf.js to load pdf into a web application so that I can further extract information from the pdf file live. But I am getting this error with a very minimal example.

I have tried wrapping the code in $(document).ready() as suggested in Uncaught ReferenceError: PDFJS is not defined when initialising PDF.JS

I am not able to access PDFJS in console either.

Below is the code I am using (from https://www.sitepoint.com/custom-pdf-rendering/)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>PDF.js Learning</title>
  </head>
  <body>
    <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>
    <script>
    $(document).ready(function () {
    var url = "https://github.com/mozilla/pdf.js/blob/master/web/compressed.tracemonkey-pldi-09.pdf";

// Asynchronous download PDF
PDFJS.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);
  });
  })
  </script>
  <canvas id='the-canvas'></canvas>
  </body>
</html>

Upvotes: 10

Views: 29492

Answers (2)

Ananth Kishore
Ananth Kishore

Reputation: 381

pdfjsLib.getDocument() works. Now I just need to know why...

Upvotes: 18

Chirag Vaghela
Chirag Vaghela

Reputation: 141

Maybe I go with that page. Solved my query. Version 2.0 have removed PDFJS object and used pdfjsLib.

[The global PDFJS object is removed in version 2.0, so the tutorial you're using is out of date for that version. Refer to the examples folder for how to use PDF.js 2.0, for example] https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld.html

Upvotes: 0

Related Questions