Show progress while loading pdf file ngx-doc-viewer

Question

Somebody have more documentation for "googleCheckContentLoaded=true" and "loaded" otput?? What I want is to show progress while loading pdf file. I'm using ngx-doc-viewer

Answer 1

Use Iframe with load() output function as given below -

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

Answer 2

It worked for me:

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 3

Working solution:

<ngx-doc-viewer   [url]=excelUrl  viewer="url"  viewer="google 
   (loaded)="contentLoaded()">
</ngx-doc-viewer>   

In ts file We Should call the Function for loader

When the file loaded Successfully , the below function will call

contentLoaded(){
console.log("content Loaded")
}

Answer 4

Easy working and proper solution as per Google Devs

<div id="progressBar"><mat-progress-bar mode="indeterminate"></mat-rogress-bar></div>
<ngx-doc-viewer
  [url]="attachment.file_path"
  viewer="google"
  googleCheckContentLoaded="true"
  googleCheckInterval = 3000
  googleMaxChecks = 5
  (loaded)="contentLoaded()"
  class="doc-viewer">
</ngx-doc-viewer>

In scss:

.doc-viewer{
  width:100%;
  height:80vh;
}

In Ts file:

contentLoaded() {
    document.getElementById("progressBar").style.display = "none";
}