how to handle binary file or xlsx as a response from angular 17 ionic 7

Please suggest how to handle binary file or xlsx as a response from angular ionic. I have done this but I am getting error on when I return the get method. Please check the attached image shown.

Please check my code

HTML File :-

<ion-button color="primary" expand="block" (click)="downloadPredefinedExcel()" [disabled]="downloadedExcel">
<ion-icon name="download-outline" slot="start"></ion-icon>
Download Excel Template
</ion-button>



Typescript File:-



// Download the excel file for bulk upload data
downloadPredefinedExcel() {
this.commonService.present();
this.productService.getDownloadExcelForBulkUpload().pipe(
tap((blob: Blob) => {
this.commonService.dismiss();
this.downloadedExcel = true;
this.downloadFile(blob, 'BulkUploadTemplate.xlsx'); // Change the filename if needed
this.commonService.success('Download Successfully');
}),
catchError((error) => {
this.commonService.dismiss();
this.commonService.danger('Download failed.');
return throwError(() => new Error(error.message));
})
).subscribe();
}

downloadFile(blob: Blob, filename: string) {
const link = document.createElement('a');
const url = window.URL.createObjectURL(blob);
link.href = url;
link.download = filename;
link.click();
window.URL.revokeObjectURL(url);
}


Service File:-

/* For Download Excel Bulk Upload */
getDownloadExcelForBulkUpload() {
return this.commonApi.getDownloadExcelForBulkUpload();
}


common File:-

getDownloadExcelForBulkUpload() {
return this.getBlob(`${environment.baseUrl + ApiUrls.DownloadExcelForBulkUpload}`);
}

GenericApi API File



protected getBlob(url: string, options: any = {}): Observable<Blob> {
return this.http.get<Blob>(url, { ...options });
}

ApiUrls File:-
DownloadExcelForBulkUpload: '/api/files/bulkUpload/ServiceDownload',


But I am gettint this error on GenericApi API File: -
Type 'Observable<HttpEvent<Blob>>' is not assignable to type 'Observable<Blob>'.
Type 'HttpEvent<Blob>' is not assignable to type 'Blob'.
Type 'HttpSentEvent' is missing the following properties from type 'Blob': size, arrayBuffer, bytes, slice, and 2 more.ts(2322)

Continue reading...