Using pdfnetjs and webviewer in Angular 2 single page app

[Glen Davies]

Hi

I am looking at integrating webviewer along with some pdfnetjs backend functionality into an Angular 2 single page app. I have webviewer integrated into component and that all works as expected. My question is the best way to also access the pdfnet APIs. 

The documentation suggests that the best approach is to use the webviewer config.js file to access the pdfnet APIs, rather than trying to load them separately in the same context as the webviewer - the docs, and a console warning, suggest there can be issues if both are loaded in the same context. However, my preference would be to instead inject the pdfnet APIs into an Angular 2 service (which is a singleton), which will make them much more accessible to rest of the app components.

Does anybody have any experience with using pdfnetjs in Angular and know if there are any potential issues with isolating the pdfnet APIs in an angular service rather than accessing via the webviewer config.js file?

Thanks

Glen

[Glen Davies]

I have done some more work on this. It seems that even isolating the PDFNet instance in an angular service still causes problems when trying to use the APIs in conjunction with a document instance within webviewer.

The workaround I have found so far is to just run the following in the webviewer config.js

(function () {

    $(document).on('documentLoaded', function () {

        PDFNet.initialize().then(function () {

           parent.postMessage('PDFNetLoaded', '*');

        });

    });

})();

And within Angular listen for the PDFNetLoaded event and then grab the PDFNet instance from the webviewer iframe, eg.

    window.addEventListener('message', function (e) {

      if (e.data === 'PDFNetLoaded') {

        var PDFNet = this.viewerIframe.contentWindow.PDFNet;

      }

    }, false);

This seems to work, and this PDFNet instance then seems to play perfectly nicely with the doc instance in webviewer.

It seems like a slight hack though, so if anybody has any better ideas about how to set this up, or if you can see any major gotchas with this approach, let me know.

Glen

[David Tippett]

Hi Glen,

The approach you are using seems like a reasonable way to deal with this situation. It is technically possible to load PDFNet in the outer frame and pass the worker context into WebViewer to avoid creating multiple PDFNetJS workers, but this is more complicated and error prone than the technique you outlined.

David

[Nishila Mv]

Hi Glen,

I am looking for how to integrate pdftron in angular 4 projects.

As per the documentation i have added the WebViewerComponent in my angular project but the page instance replicating twice while i loading the page. Could you please help me to the steps...