Angular FitMode

Technical Support
1

Hello. I’m using this dependecy ("@pdftron/webviewer": “^8.6.1”) on an angular project and i’am trying to set the FitMode of the viewer to FitWidth like this:

this.wvInstance?.Core.documentViewer.setFitMode(this.wvInstance?.Core.DocumentViewer.FitMode.FitWidth);

but i’m getting the this error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘FitWidth’)

2

Hi Felipe,

Can you show me how your WebViewer is instantiated? Here is a reference guide on Angular integration with WebViewer:

Also, does it work when using instance as is?
const { documentViewer } = instance.Core;
documentViewer.setFitMode(documentViewer.FitMode.FitWidth);

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

3

Hey,

everything Core related is a little bit confusing. I am using DocumentViewer with a custom UI. Sad to say, that I have to access it like this

export function getPDFTronCore(): typeof Core {
  if (!window.hasOwnProperty("Core")) {
    throw new Error("PDFTron Core not available in window object");
  }
  return (window as any).Core;
}

When I need to access Core.DocumentViewer API, I have to remove the type to get it work like this:

const pdfTronCore = getPDFTronCore();
pdfTronCore.setWorkerPath("assets/pdftron");
documentViewer = new pdfTronCore.DocumentViewer();

With typing like
documentViewer: Core.DocumentViewer = new pdfTronCore.DocumentViewer();
Property ‘FitMode’ does not exist.

So there seems to be a difference between Core.DocumentViewer from “@pdftron/webviewer” and “@pdftron/webviewer/public/core/webviewer-core.min.js”

Cheers!

4

Hi jherbe,

Your getPDFTronCore() method is using window.core instead of instance.core. Can you show a code snippet of your WebViewer Constructor that has the instance?

I believe because you are using window instead of an iframe, and that’s where you are not able to access the fitmode:

Best Regards,
Kevin Kim

5

Hi Kevin,

I am using running PDFTron without viewer:
https://www.pdftron.com/documentation/web/get-started/without-viewer/

And without type safety on my documentViewer object I am able to access fitMode.

6

Hi jherbe,

Instead of creating a new documentViewer, do you have access to the Core object’s documentViewer to use instead?
https://www.pdftron.com/api/web/Core.DocumentViewer.html#main

Is there a WebViewer constructor where an instance is defined?

Best Regards,
Kevin Kim

7

Hi Kevin,

no, I am importing WebViewer Core an use it to create my DocumentViewer Instance. Like it’s done in the reference project:
https://github.com/PDFTron/webviewer-custom-ui
So I don’t need the WebViewer Constructor and have my own UI and get rid of the iFrame.
Everything is working fine with object type any. Due to your API design, you cannot use a typed object reference in this case. It would be nice to use webviewer-core.min.js without attaching it to the window and copy all the asset files. But I guess most customers are using the WebViewer Instance approach.

Cheers!

8

Hi jherbe,

That is correct, here is a guide where you can automate the copying of the assets:

Please feel free to submit another ticket if there is any other inquiries we can help with.

Best Regards,
Kevin Kim