Error: Response is not an ArrayBuffer | unable to make api requests of responseType 'arraybuffer'

Question

I'm getting this console error when trying to make a api request to download a pdf file.

service.ts

public getFileContent(fileURL: string): Observable<any> {
    return this.httpClient.get(fileURL, { responseType: 'arraybuffer'})
        .pipe(
            catchError(error => this.responseHandler.error(error, 'Error retrieving file content.'))
        );
}

component.ts

this.fileDownloadService
        .getFileContent(this.fileDetails.fileUid)
        .subscribe((res) => {
            const blob = new Blob([res], { type: 'application/pdf' });
            this.fileURL = this.sanitizer.bypassSecurityTrustResourceUrl(
                window.URL.createObjectURL(blob)
            );
        });

I have tried changing the responseType to 'blob' then I get this error 'Error: Response is not a Blob.'

any help would be highly appreciated. thank you.

this is the error message btw

and api response in swagger is:

Answer 1

I ended up using fetch API to get the file with blob response type. Not sure why it didn't work with HttpClient.

fetch(fileURL).then(res => {
  const blob = await res.blob();
  this.iframeSrc = URL.createObjectURL(blob);
});