2

i am working in project where using model to show PDFTron webviewer. i am using model popup to load webviewer inside it when select pdf file from list.

first time it loads pdf document but when "clr-modal" open second time webviewer not load document. 

 //PdfviewerComponent html.

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

 </div>

export class PdfviewerComponent implements OnInit, AfterViewInit, OnChanges {

  @ViewChild('viewer', { static: true }) viewer: ElementRef;
  @Input() hash: string;

  wvInstance: any;
  constructor() { }

  ngOnInit(): void { }

ngAfterViewInit(): void {
   console.log('AfterViewInit called');
   WebViewer({
     path: '../assets/lib'

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

     const idtoken = localStorage.getItem('id_token');
        const options = {
          customHeaders: { Authorization: 'Bearer ' + idtoken }
      };

        const hash = this.hash.split(' ')[0];
        const url = `/api/project/readfile/${hash}`;
        this.wvInstance.loadDocument(url, options);

   });

 }

}


//popup in main component

<clr-modal [(clrModalOpen)]="openModel"  >
   <h3 class="modal-title">{{currentFileName}}</h3>
 <div class="modal-body">
   <app-pdfviewer [hash]="currentFileHash"></app-pdfviewer>
 </div>

</clr-modal>
hashgoal
  • 41
  • 1
  • 3

1 Answers1

1

How does your popup modal work? Does it add "display:none" to hide the DOM element or does it remove the element from the DOM and add it back later?

If it removes the DOM element and add it back, there shouldn't be a problem (beside slower performance due to having to reload everything each time) as long as the WebViewer get re initialized.

If the popup is using "display:none", that is a problem. A lot of browsers have issues when using "display:none" with iframes (which WebViewer uses). If possible try using "visibility:hidde", "opacity:0", or "height: 0px" to hide the modal instead.

Andrew Yip
  • 121
  • 2