PDFTRON 实例未在模型上第二次打开 pdf 文档答案

【问题标题】：PDFTRON instance not opening pdf document second time on modelPDFTRON 实例未在模型上第二次打开 pdf 文档
【发布时间】：2020-08-10 01:03:33
【问题描述】：

我正在使用模型显示 PDFTron webviewer 的项目中工作。当从列表中选择 pdf 文件时，我正在使用模型弹出窗口在其中加载 webviewer。

第一次加载 pdf 文档，但是当“clr-modal”第二次打开 webviewer 时没有加载文档。

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

【问题讨论】：

标签： pdftron

【解决方案1】：

您的弹出模式是如何工作的？它是添加“display:none”来隐藏 DOM 元素，还是从 DOM 中删除元素并稍后再添加？

如果它删除 DOM 元素并将其添加回来，只要 WebViewer 重新初始化，就不会有问题（除了由于每次都必须重新加载所有内容而导致性能变慢）。

如果弹出窗口使用“display:none”，那就有问题了。许多浏览器在将“display:none”与 iframe（WebViewer 使用）一起使用时都会出现问题。如果可能，请尝试使用 "visibility:hidde"、"opacity:0" 或 "height: 0px" 来隐藏模式。

【讨论】：

谢谢，但问题已通过可破坏的组件弹出窗口解决。