Arjun As
Arjun As

Reputation: 19

Google Docs iframe slow, any faster alternatives?

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

Answers (0)

Related Questions