I came up with this solution after consolidating various snippets from stack overflow (although I can't recall the specific sources. Feel free to provide them in the comments).

Within My service:

public fetchPDF(): Observable<Blob> {   
//const options = { responseType: 'blob' }; not needed
    let uri = '/my/uri';
    // Note that using get<Blob> directly won't compile, so the appropriate API selection is done this way
    return this.http.get(uri, { responseType: 'blob' });
}

And in the component (aggregated from multiple solutions):

public displayPDF(fileName: string): void {
    this.myService.fetchPDF()
        .subscribe(x => {
            // Creating a new blob object with explicit mime-type setting is crucial
            // for correct functionality across different browsers
            var newBlob = new Blob([x], { type: "application/pdf" });
            
            // IE requires the use of msSaveOrOpenBlob instead of directly setting blob as link href
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                window.navigator.msSaveOrOpenBlob(newBlob, fileName);
                return;
            }
            
            // For other browsers: 
            // Creating a link pointing to the ObjectURL containing the blob.
            const data = window.URL.createObjectURL(newBlob);
            
            var link = document.createElement('a');
            link.href = data;
            link.download = fileName;
            // Delaying the revoking of ObjectURL for Firefox
            link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
            
            setTimeout(function () {
                window.URL.revokeObjectURL(data);
                link.remove();
            }, 100);
        });
}

This code handles PDF display in IE, Edge, Chrome, and Firefox. However, I'm not entirely satisfied with the browser-specific additions cluttering my component.

Here's my approach for handling file downloads in Angular versions 12 and above:

this.DownloadService
    .fetchFileFromApi()
    .pipe(take(1))
    .subscribe((response) => {
        const downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(new Blob([response.content], { type: response.content.type }));

        const contentDisposition = response.headers.get('content-disposition');
        const fileName = contentDisposition.split(';')[1].split('filename')[1].split('=')[1].trim();
        downloadLink.download = fileName;
        downloadLink.click();
    });

The subscription is part of a simple get() call using the Angular HttpClient.

// download-service.ts

fetchFileFromApi(url: string): Observable<HttpResponse<Blob>> {
  return this.httpClient.get<Blob>(this.baseDownloadUrl + url, { observe: 'response', responseType: 'blob' as 'json'});
}

One approach is to utilize Angular directives for this task:

@Directive({
    selector: '[downloadInvoice]',
    exportAs: 'downloadInvoice',
})
export class DownloadInvoiceDirective implements OnDestroy {
    @Input() orderNumber: string;
    private destroy$: Subject<void> = new Subject<void>();
    _loading = false;

    constructor(private ref: ElementRef, private api: Api) {}

    @HostListener('click')
    onClick(): void {
        this._loading = true;
        this.api.downloadInvoice(this.orderNumber)
            .pipe(
                takeUntil(this.destroy$),
                map(response => new Blob([response], { type: 'application/pdf' })),
            )
            .subscribe((pdf: Blob) => {
                this.ref.nativeElement.href = window.URL.createObjectURL(pdf);
                this.ref.nativeElement.click();
            });
    }
    
    // Add your custom loading class
    @HostBinding('class.btn-loading') get loading() {
        return this._loading;
    }

    ngOnDestroy(): void {
        this.destroy$.next();
        this.destroy$.complete();
    }
}

Implement the following code in your template:

<a
      downloadInvoice
      [orderNumber]="order.number"
      class="btn-show-invoice"
  >
     Show invoice
  </a>

If you want to prompt the browser to download the file, you can achieve this by adjusting the

Content-Type: 'application/octet-stream;

Alternatively, if this server-side configuration is not feasible or you prefer to handle the download on the client-side, you can utilize the file-saver library. FileSaver.js simplifies the process significantly.

this.downloadService.getPdf().subscribe((resultBlob: Blob) => {
   saveAs(resultBlob, 'help.pdf', { autoBom: false });
});

While building upon @Yennefer's solution, I took a different approach by extracting the file name from the server since I didn't have it in my front end. I made use of the Content-Disposition header for transmitting this information, as it is commonly used by browsers for direct downloads.

To begin, I required access to the request headers, as shown in the following method with the get options object:

public getFile(): Observable<HttpResponse<Blob>> {   
    let uri = '/my/uri';
    return this.http.get(uri, { responseType: 'blob', observe: 'response' });
}

Next, I needed a function to extract the file name from the response header.

public getFileName(res: HttpResponse<any>): string {
    const disposition = res.headers.get('Content-Disposition');
    if (!disposition) {
        // either the disposition was not sent, or is not accessible
        //  (see CORS Access-Control-Expose-Headers)
        return null;
    }
    const utf8FilenameRegex = /filename\*=UTF-8''([\w%\-\.]+)(?:; |$)/;
    const asciiFilenameRegex = /filename=(["'])(.*?[^\\])\1(?:; |$)/;

    let fileName: string = null;
    if (utf8FilenameRegex.test(disposition)) {
      fileName = decodeURIComponent(utf8FilenameRegex.exec(disposition)[1]);
    } else {
      const matches = asciiFilenameRegex.exec(disposition);
      if (matches != null && matches[2]) {
        fileName = matches[2];
      }
    }
    return fileName;
}

This function handles both ascii and utf-8 encoded file names, with a preference for utf-8.

Once the file name is obtained, I can update the download property of the link object, as demonstrated in @Yennefer's solution (specifically the lines link.download = 'FileName.ext' and

window.navigator.msSaveOrOpenBlob(newBlob, 'FileName.ext');

A few key points to note about this code:

1. The Content-Disposition header is not included in the default CORS whitelist, which may result in it being inaccessible from the response object based on your server's configuration. To address this, ensure that the header Access-Control-Expose-Headers includes Content-Disposition in the response.

2. Some browsers may modify file names further. For example, in my version of Chrome, colons (:) and quotation marks (") were replaced with underscores. There may be similar alterations in other browsers, but that is beyond the scope of this discussion.

//Procedure: 1
//Primary Function
retrievePDF() {
  return this.http.get(environment.baseUrl + apiUrl, {
      responseType: 'blob',
      headers: new HttpHeaders({
        'Access-Control-Allow-Origin': '*',
        'Authorization': localStorage.getItem('AccessToken') || ''
      })
    });
}

//Procedure: 2
//downloadService
fetchReceipt() {
    return new Promise((resolve, reject) => {
      try {
        // {
        const endpoint = 'js/getReceipt/type/10/id/2';
        this.retrievePDF(endpoint).subscribe((data) => {
          if (data !== null && data !== undefined) {
            resolve(data);
          } else {
            reject();
          }
        }, (error) => {
          console.log('ERROR STATUS', error.status);
          reject(error);
        });
      } catch (error) {
        reject(error);
      }
    });
  }


//Procedure: 3
//Section 
fetchReceipt().subscribe((result: any) => {
  var downloadURL = window.URL.createObjectURL(data);
  var link = document.createElement(‘a’);
  link.href = downloadURL;
  link.download = “sample.pdf";
  link.click();
});