Question

有人有更多关于“ googleCheckContentLoaded = true ”和“ 已加载” otput的文档？我想要的是在加载pdf文件时显示进度。我正在使用 ngx-doc-viewer

Answer 1

它对我有用：

view.component.html

<div id="progressBar"><mat-progress-bar mode="indeterminate"></mat-progress-bar></div>
<ngx-doc-viewer [url]="data.file" viewer="google" style="width:100%;height:64vh;"></ngx-doc-viewer>

view.component.ts

isDocLoaded(){
    this.timeIntervalFrame = setInterval(() => {
        var el = document.getElementById('iframe');
        if(el){
            clearInterval(this.timeIntervalFrame);
            el.addEventListener('load', function(){
                console.log("Load event: Iframe doc loaded.");
                document.getElementById("progressBar").style.display = "none";
                el.addEventListener('load', function(){ console.log("Load event: Iframe doc loaded."); }, true);
            }, false);
        }
    }, (1000));
}

Answer 2

将 Iframe 与 load() 输出函数一起使用，如下所示 -

fileLoading = false;
  loadFile(pdf_url) {
    this.fileLoading = true;
    this.pdfUrl = this.sanitizer.bypassSecurityTrustResourceUrl('https://docs.google.com/viewer?url=' + pdf_url + '?timestamp=' + Math.floor(Math.random() * 100000) + '&embedded=true#toolbar=0&navpanes=0&scrollbar=0' + '&#view=Fit');
  }
  // onfileLoad will  fire if file loaded
  onfileLoad(e) {
    this.fileLoading = false;
    
  }

<iframe *ngIf="pdfUrl" width="100%" (load)="onfileLoad($event)" height="100%" [src]="pdfUrl" seamless title="resume" frameborder="no" style="position: relative; z-index: 9;">Loading</iframe>
              <img class="resume-loader" *ngIf="fileLoading" src="assets/images/CS_loader_Talmob_Trans_75px.gif" alt="loader">

加载pdf文件ngx-doc-viewer时显示进度

2 个答案: