Seeking faster alternatives to slow-loading document viewer in Angular

Other Questions Google docs
1

Hey everyone, I’m having trouble with a document viewer in my Angular app. I used Google Docs Viewer in an iframe to show files, but it’s super slow and sometimes just shows a blank screen. I’ve tried to improve it by implementing some code that reloads the iframe, but the performance still lags significantly.

setupViewer() {
  this.isBusy = true;
  let extension = this.documentUrl.split('.').pop();

  if (extension === 'doc' || extension === 'rtf') {
    this.sourceUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.documentUrl);
  } else {
    this.sourceUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
      `https://view.officeapps.live.com/op/embed.aspx?src=${this.documentUrl}`
    );
  }

  setTimeout(() => this.isBusy = false, 2000);
}

Does anyone have recommendations for a more efficient method or alternative package capable of rendering various file types quickly? I’d appreciate any ideas to help improve the load times. Thanks!

2

I’ve encountered similar issues with document viewers in Angular applications. One solution that worked well for me was implementing a progressive loading strategy. Instead of loading the entire document at once, you can load it in chunks, displaying the first few pages immediately while the rest load in the background. This approach significantly improved perceived performance for our users.

For implementation, consider using a library like PDF.js for PDFs, as it offers granular control over rendering. For other file types, you might want to explore server-side conversion to a more web-friendly format before serving to the client. This can reduce client-side processing and improve load times.

Additionally, optimizing your network requests and implementing proper caching mechanisms can further enhance the overall performance of your document viewer.

3

hey man, I’ve been there. google docs viewer is a pain. have u looked into PDF.js? it’s pretty quick for pdfs. for other file types, maybe try ngx-doc-viewer? it supports a bunch of formats and loads way faster. might be worth a shot. good luck!

4

I feel your pain with the Google Docs Viewer, mate. Been there, done that. Have you considered using ng2-pdf-viewer? It’s been a game-changer for me. Blazing fast for PDFs and integrates smoothly with Angular. For other file types, you might want to look into converting them server-side to PDF first. It’s a bit of extra work, but the performance boost is worth it.

Another trick that helped me was lazy loading. Only load the first few pages initially, then load more as the user scrolls. It makes the initial load feel much snappier. Also, don’t forget to optimize your file sizes before serving them up. A good compression can make a world of difference.

Hope this helps! Let us know what ends up working for you.