SSRS Reports in an Angular App (Part 4 - Downloading the Report)

I recently wrote the first, second, and third parts of this series on displaying SSRS reports in an Angular application. At the end of the third post I had a report, in PDF format, being displayed via a 3rd party component in my Angular application and the user was able to preview the report for printing. Let's pick up from there.

In addition to printing (or print preview as it turned out) we also wanted users to be able to download the report with a name they provide. It was fairly straightforward to get this done, and just required combining two pieces.

The first thing we wanted to do was allow the user to provide a name. Since this is a pretty common feature (and the how-to is going to vary wildly from one project to the next) I'm going to skip it here. The key piece was using the file-saver (via npm package) to save the file to the user's computer.

To better facilitate unit testing and abstraction I created a FileSaver service that I could inject into my components when necessary:

   1:  import { Injectable } from '@angular/core';

   2:  import * as FileSaver from 'file-saver';

   3:  

   4:  @Injectable()

   5:  export class FileSaverService {

   6:    saveAs(blob: any, name: string): void {

   7:      const document = new Blob([blob], {

   8:        type: 'application/pdf'

   9:      });

  10:      FileSaver.saveAs(document, name);

  11:    }

  12:  }

Once I had that service created I just needed to inject it and use it like this:

   1:  save(): void {

   2:    this.fileSaverService.saveAs(new Blob([this.reportBytes.buffer]), this.downloadName);

   3:  }

That turned out to be pretty much all I needed to do to download my reports. I love the easy parts.

1. Display a list of all reports in SSRS
2. Allow the user to click on a single report to view the report
3. Allow the user to print the report
4. Allow the user to download the report

Update: All four parts of this series are complete now.

1. SSRS Reports in an Angular App (Part 1 - Showing the Report)
2. SSRS Reports in an Angular App (Part 2 - Showing the Report (correctly))
3. SSRS Reports in an Angular App (Part 3 - Printing the Report)
4. SSRS Reports in an Angular App (Part 4 - Downloading the Report)(this post)