angular - How to handle binary file or XLSX as a response? - Stack Overflow

admin管理员组

文章数量:1416333

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.

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() {
    thismonService.present();
    this.productService.getDownloadExcelForBulkUpload().pipe(
      tap((blob: Blob) => {
        thismonService.dismiss();
        this.downloadedExcel = true;
        this.downloadFile(blob, 'BulkUploadTemplate.xlsx'); // Change the filename if needed
        thismonService.success('Download Successfully');
      }),
      catchError((error) => {
        thismonService.dismiss();
        thismonService.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 thismonApi.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 getting 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)

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.

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() {
    thismonService.present();
    this.productService.getDownloadExcelForBulkUpload().pipe(
      tap((blob: Blob) => {
        thismonService.dismiss();
        this.downloadedExcel = true;
        this.downloadFile(blob, 'BulkUploadTemplate.xlsx'); // Change the filename if needed
        thismonService.success('Download Successfully');
      }),
      catchError((error) => {
        thismonService.dismiss();
        thismonService.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 thismonApi.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 getting 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)

• angular
• typescript
• ionic-framework
• rxjs
• blob

Share Improve this question Follow edited Feb 3 at 6:06 DarkBee 15.5k88 gold badges7272 silver badges118118 bronze badges asked Feb 3 at 4:09 keshav godanikeshav godani 31322 gold badges55 silver badges1616 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

The reason is evident in the error message

Type 'Observable<HttpEvent>' is not assignable to type 'Observable'. Type 'HttpEvent' is not assignable to type 'Blob'.

HttpClient.get returns an Observable by default. You can type-cast it as follows:

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

as json is for typescript type-checking

Due to object destructuring { ...options, responseType: 'blob' } the typing is lost, just reapply the typing using as of typescript like shown below.

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

本文标签： angularHow to handle binary file or XLSX as a responseStack Overflow