有人有更多关于“ googleCheckContentLoaded = true ”和“ 已加载” otput的文档? 我想要的是在加载pdf文件时显示进度。 我正在使用 ngx-doc-viewer
答案 0 :(得分: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));
}
答案 1 :(得分:0)
将 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">