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

The `googleCheckContentLoaded` doesnt appear to support progress indication. It appears to feature polling behavior which returns a single boolean indicating whether the content has completed downloading https://www.npmjs.com/package/ngx-doc-viewer — jamesioppolo, Feb 10 '20 at 23:05

score 1 · Answer 1 · edited Nov 17 '21 at 12:48

1

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

edited Nov 17 '21 at 12:48

Eric Aya

69,473
35
181
253

answered Nov 17 '21 at 08:59

Gowtham S

11
2

score 1 · Answer 2 · edited Jan 25 '22 at 11:02

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

score 0 · Answer 3 · answered Mar 04 '21 at 11:24

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

score 0 · Answer 4 · answered Jun 23 '21 at 05:29

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));
}

Show progress while loading pdf file ngx-doc-viewer

4 Answers4