Need help regd Webviewer loadDocument function with Angular Material Tab

Technical Support WebViewer
1

WebViewer Version:

Do you have an issue with a specific file(s)? No, all files fail.
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? Yes
Is your issue related to annotations? No

Please give a brief summary of your issue:
loadDocument function of WebViewer is not working inside angular material tab (mat-tab-group) when I visit another tab and comes back.

Please describe your issue and provide steps to reproduce it:
I am trying to load WebViewer inside an tab (name: docPreview). It loads fine using this function loadDocument. But if I go to another tab and come back to docPreview tab, same function loadDocument doesn’t work. I am not getting any error also.
(The more descriptive your answer, the faster we are able to help you)

  1. Two tabs and one tab has webviewer
    mat-tab-group →
    A. mat-tab label=“Document Preview”
    → app-document-preview

       //this tab has web viewer component. It shows document fine when I load it first time.

B. mat-tab label=“OtherTab”
→ app-OtherTab-view
2. Web Viewer code (inside app-document-preview). It instantiates a variable named wvIns.
ngAfterViewInit(): void {

WebViewer({
  path: '/assets/lib',
  initialDoc: ''
}, this.viewer.nativeElement)
  .then(instance => {
    const { UI, Core } = instance;
    const { documentViewer, annotationManager, Tools, Annotations } = Core;
    const { Rect, Quad} = instance.Core.Math;
    // call methods from UI, Core, documentViewer and annotationManager as needed
    this.wvIns = instance;
	....

  1. My function getDocument loads document. it gets a blob and calls it. I can see document is loaded properly.
    getDocument(obj: any): void {
    …
    this.wvIns.UI.loadDocument(res);

     },

…
}

  1. But this function doesn’t work if I go to another tab and comes back. I can see it is calling below function but nothing is happening. I tried it with valid hardcode PDF link too and it is not working with that either

Please provide a link to a minimal sample where the issue is reproducible:

1 Like
2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

1 Like
3

Hello vrana289,

Welcome to the PDFTron Community Forum!

  1. Are you getting any errors? If so can you attach photos of the stacktrace
  2. Are you able to send a minimal sample that has this issue reproducible?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

1 Like
4

Hi, thanks for the reply. I am not getting any errors except pdf is not loaded. I have put complete code at https://vrana289@dev.azure.com/vrana289/PDF-POC/_git/PDF-POC

Here is the main sample code

  1. PDF view component code
    import WebViewer, { WebViewerInstance } from ‘@pdftron/webviewer’;
    …
    selector: ‘app-pdf-view’,
    …
    ngAfterViewInit(): void {

    WebViewer({

    path: ‘/assets/lib’,

    }, this.viewer.nativeElement).then(instance => {

    this.wvInstance = instance;
    })

}

loadDoc(): void{

this.wvInstance.UI.loadDocument('https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf');

}
…
2. PDF view HTML
<input type=“button” value=“Load Doc” (click)=“loadDoc()”>

<div #viewer class="viewer"></div>

3.Main component code which has tabs
Sample PDF Viewer

<mat-tab label="Document Preview" >

 <app-pdf-view></app-pdf-view>

</mat-tab>

<mat-tab label="Other">

  <app-other-view></app-other-view>

</mat-tab>
1 Like
5

The above code works fine until I have visited other tab. After that, clicking button LoadDoc does nothing.

1 Like
6

Hello vrana289,

I believe this is because when you switch tabs the instance is destroyed when rendering the other viewer, I would suggest moving the WebViewer instance outside the tabs logic outside it’s tab, and then pass it in.

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

1 Like
7

Hello @vrana289,

In order to get the PDF to load correctly when swapping back into the tab, you can also adjust the mat-tab-group with the preserveContent attribute.

For example, you can try the following:

  <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" preserveContent="true">
    <mat-tab label="First"><div>Content 1</div></mat-tab>
    <mat-tab label="Second">Content 2</mat-tab>
    <mat-tab label="Third">
        <app-pdf-viewer></app-pdf-viewer>
    </mat-tab>
  </mat-tab-group>

Let me know if this works for you!

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

1 Like