[Fixed] Render PDF in Forge Viewer with PDF Extension – pdf.worker.js throws warning

Issue

While trying to render a PDF, which gets served through our own API, the pdf.worker.js throws the following warning and the rendered PDF always keeps being completely white.

And I only see this (it’s a wide PDF, but gets correctly rendered within the Demo):

Our Client application is served with angular, however I could not totally encapsulate the problem. With a simple and new angular application I was able to render a PDF File, served from our API but in my bigger client application the error above keeps occurring and I don’t know why.

I’m using this Code to load the PDF, which inspired by this GitHub and this Blog Entry from Autodesk.

Autodesk.Viewing.Initializer({ env: 'Development', useADP: false }, () => {
  const viewer = new Autodesk.Viewing.GuiViewer3D(
    document.getElementById('forgeViewer'),
  );
  viewer.start();

  const url =
    'http://api.pdfFileToRender.pdf';

  viewer.loadExtension('Autodesk.PDF').then(() => {
    viewer.loadModel(
      url,
      {},
      model => {
        console.error('Success: ', model);
      },
      (errorCode, errorMessage, errorArgs) => {
        console.error('Error Code: ', errorCode);
        console.error('Error Msg: ', errorMessage);
        console.error('Error Args: ', errorArgs);
      },
    );
    viewer.loadExtension('Autodesk.Viewing.MarkupsCore');
    viewer.loadExtension('Autodesk.Viewing.MarkupsGui');
  });
});

The loadModel Function also calls the onSuccessCallback and I see "Success" in my Console.

For me it is not possible to integrate the PDF Extension into my Client App. Does anyone know a solution or have a hint for this, I gladly appreciate it.

It is also important for me, that the PDFs are rendered locally and are not uploaded to any Forge API.

For serving the Client Application I’m using Angular 11.2.7 and Typescript 4.1.5. I’m loading the ForgeViewer with the Version 7.36.0 but the Problem occurs also with other Versions.

Solution

For anyone interested, I could figure it out. Our own application was defining array prototype functions. However this is a problem for pdf.js which get’s used by the PDF Extension from Forge.

The root problem was by defining array prototype functions like this:

Array.prototype.myFunction = function(...) {...}

We had to either exclude our own array functions or write it that way:

Object.defineProperty(Array.prototype, 'myFunction', {value: function(...) {...})

So, if you application defines array prototype function, use Object.defineProperty or don’t use them at all. This seems to solve the Issue. Cheers.