Reputation: 19
I have a scenario where I implemented Google Docs Viewer using an iframe in Angular to view files, but the load time is too long, and sometimes it shows a blank screen. Is there an alternative package that supports all file types or a solution for faster file rendering?
ngOnInit() {
this.isLoading = true;
if (
this.fileUrl.split('.').pop() === 'html' ||
this.fileUrl.split('.').pop() === 'odt'
) {
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(
this.fileUrl
);
} else {
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(
`https://docs.google.com/viewer?url=${this.fileUrl}&embedded=true`
);
}
setTimeout(() => (this.isLoading = false), 2500);
}
checkIFrame(iframe: any) {
if (iframe) {
iframe.onload = () => {
if (this.checkIFrameSubscription) {
this.checkIFrameSubscription.unsubscribe();
}
};
}
}
reloadIFrame(iframe: any) {
if (iframe) {
// iframe.src = this.url;
if (
this.fileUrl.split('.').pop() === 'html' ||
this.fileUrl.split('.').pop() === 'odt'
) {
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(
this.fileUrl
);
} else {
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(
`https://docs.google.com/viewer?url=${this.fileUrl}&embedded=true`
);
} // Google document viewer url.
}
}
ngAfterViewInit() {
let iframe = this.iframeRef ? this.iframeRef.nativeElement : null;
this.checkIFrame(iframe);
this.checkIFrameSubscription = interval(3000)
.pipe(take(Math.round(20000 / 3000)))
.subscribe(() => {
if (iframe == null) {
iframe = this.iframeRef
? this.iframeRef.nativeElement
: null;
this.checkIFrame(iframe);
}
this.reloadIFrame(iframe);
});
}
}
I used this code to refresh if the file fails to load but still it takes too much time.
Upvotes: 1
Views: 45