Экземпляр PDFTRON не открывает документ pdf во второй раз на модели - PullRequest
0 голосов
/ 26 апреля 2020

Я работаю в проекте, где использую модель для показа веб-браузера PDFTron. Я использую всплывающее окно модели для загрузки веб-просмотра внутри него, когда выберите файл PDF из списка.

при первой загрузке pdf документа, но при открытии "clr-modal" во второй раз веб-обозреватель не загружает документ.

 //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>

1 Ответ

0 голосов
/ 28 апреля 2020

Как работает ваш мод для всплывающих окон? Добавляет ли он «display: none», чтобы скрыть элемент DOM, или он удаляет элемент из DOM и добавляет его позже?

Если он удаляет элемент DOM и добавляет его обратно, не должно быть проблема (помимо снижения производительности из-за необходимости каждый раз перезагружать), пока WebViewer повторно инициализируется.

Если во всплывающем окне используется «display: none», это проблема. У многих браузеров возникают проблемы при использовании «display: none» с фреймами (которые использует WebViewer). Если возможно, попробуйте использовать «visibility: hidde», «opacity: 0» или «height: 0px», чтобы скрыть модальное.

...