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

Question

有人有更多关于“ googleCheckContentLoaded=true ”和“ loaded ”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

工作解决方案：

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

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

Answer 4

根据 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>

在 scss 中：

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

在 Ts 文件中：

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