OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Received "uncaught type error cannot read properties of undefined (reading pdfjsLib.GlobalWorkerOptions)" with PDFJS

  • Thread starter Thread starter Al G
  • Start date Start date
A

Al G

Guest
I downloaded from github PDFJS 4.3.146 and installed according to github instructions USING NPM and NPX. I also installed node.js. I then loaded the generated pdf.js into a VisualStudio 2022 project on Windows 10, dropped down to the learning examples, and ran "Hello World" to validate the install and setup.

The first error I got was PDFJSlib was undefined so I added a statement to resolve: let { pdfjsLib } = globalThis;

Now when I run the page, I get an "Uncaught type error cannot read properties of undefined (reading pdfjsLib.GlobalWorkerOptions)".

The "Hello, world" title appears on the web page, followed by the Javascript code

I suspect I'm not getting the right setup of pdfjsLib correct but don't know how to fix this.


Code:
HTML is

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>'Hello, world!' example</title>
    </head>
    <body>

    <h1>'Hello, world!' example</h1>
    <canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"> 
    </canvas>

    <script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"> 
    </script>

    <script id="script" type="module">
    //
    // If absolute URL from the remote server is provided, configure the CORS
    // header on that server.
    //
    const url = './helloworld.pdf';
    let { pdfjsLib } = globalThis;
    //
    // The workerSrc property shall be specified.
    //
    pdfjsLib.GlobalWorkerOptions.workerSrc =
    '../../node_modules/pdfjs-dist/build/pdf.worker.mjs';

    //
    // Asynchronous download PDF
    //
    const loadingTask = pdfjsLib.getDocument(url);
    const pdf = await loadingTask.promise;
    //
    // Fetch the first page
    //
    const page = await pdf.getPage(1);
    const scale = 1.5;
    const viewport = page.getViewport({ scale });
    // Support HiDPI-screens.
    const outputScale = window.devicePixelRatio || 1;

    //
    // Prepare canvas using PDF page dimensions
    //
    const canvas = document.getElementById("the-canvas");
    const context = canvas.getContext("2d");

    canvas.width = Math.floor(viewport.width * outputScale);
    canvas.height = Math.floor(viewport.height * outputScale);
    canvas.style.width = Math.floor(viewport.width) + "px";
    canvas.style.height = Math.floor(viewport.height) + "px";

    const transform = outputScale !== 1
      ? [outputScale, 0, 0, outputScale, 0, 0]
      : null;

    //
    // Render PDF page into canvas context
  //
  const renderContext = {
    canvasContext: context,
    transform,
    viewport,
  };
  page.render(renderContext);
</script>

<hr>
<h2>JavaScript code:</h2>
<pre id="code"></pre>
<script>
  document.getElementById('code').textContent =
      document.getElementById('script').text;
</script>
</body>
</html>

All suggestions on how to resolve this are welcome Thanks in Advance Al
<p>I downloaded from github PDFJS 4.3.146 and installed according to github instructions USING NPM and NPX. I also installed node.js. I then loaded the generated pdf.js into a VisualStudio 2022 project on Windows 10, dropped down to the learning examples, and ran "Hello World" to validate the install and setup.</p>
<p>The first error I got was PDFJSlib was undefined so I added a statement to resolve: let { pdfjsLib } = globalThis;</p>
<p>Now when I run the page, I get an "Uncaught type error cannot read properties of undefined (reading pdfjsLib.GlobalWorkerOptions)".</p>
<p>The "Hello, world" title appears on the web page, followed by the Javascript code</p>
<p>I suspect I'm not getting the right setup of pdfjsLib correct but don't know how to fix this.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>HTML is

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>'Hello, world!' example</title>
</head>
<body>

<h1>'Hello, world!' example</h1>
<canvas id="the-canvas" style="border: 1px solid black; direction: ltr;">
</canvas>

<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module">
</script>

<script id="script" type="module">
//
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
//
const url = './helloworld.pdf';
let { pdfjsLib } = globalThis;
//
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
'../../node_modules/pdfjs-dist/build/pdf.worker.mjs';

//
// Asynchronous download PDF
//
const loadingTask = pdfjsLib.getDocument(url);
const pdf = await loadingTask.promise;
//
// Fetch the first page
//
const page = await pdf.getPage(1);
const scale = 1.5;
const viewport = page.getViewport({ scale });
// Support HiDPI-screens.
const outputScale = window.devicePixelRatio || 1;

//
// Prepare canvas using PDF page dimensions
//
const canvas = document.getElementById("the-canvas");
const context = canvas.getContext("2d");

canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px";

const transform = outputScale !== 1
? [outputScale, 0, 0, outputScale, 0, 0]
: null;

//
// Render PDF page into canvas context
//
const renderContext = {
canvasContext: context,
transform,
viewport,
};
page.render(renderContext);
</script>

<hr>
<h2>JavaScript code:</h2>
<pre id="code"></pre>
<script>
document.getElementById('code').textContent =
document.getElementById('script').text;
</script>
</body>
</html></code></pre>
</div>
</div>
</p>
<p>All suggestions on how to resolve this are welcome
Thanks in Advance
Al</p>
Continue reading...
 

Latest posts

Top