Excel Export Angular 5获取请求

Question

I have an endpoint I ping via a GET and it responds with an excel sheet that should be auto downloaded so the user can view.

I am using angular 5 and am not sure how to handle the response of this api and trigger an auto download...

I can view the response in my console via a blob in my console *right now im just console.logging the response from api

console output

this is what my service function is looking like thus far ...

getPurgeExeclReport(queryParam): Observable<any> {

  // everything regarding param contructed in Class

    this.searchUrl = `${this.searchUrl}${queryParam}`;

    return this.http.get<any>(this.searchUrl, {responseType: 'blob'});
  }

// in my component

  this.purgeEligibleReportService.getPurgeExeclReport(queryParams)
   .subscribe(result => {

    console.log(result, 'result')

   });

Please help!

Answer 1

try to give a try to this ..

before do a

npm i --save file-saver @types/file-saver

then in your ts:

import * as FileSaver from 'file-saver';

public async DownloadRicetta(id: string, name: string): Promise<Blob> {
    return new Promise<Blob>((resolve, reject) => {
      const headers = new HttpHeaders();
      headers.append('Accept', 'text/plain');

      this._http.get(environment.API_URL + `endpoint`, { headers: headers, responseType: "blob", observe: 'response' })
        .subscribe(response => {
          try {
            let blob = this.saveToFileSystem(response, name);
            resolve(blob);
          } catch (error) {
            reject(error);
          }
        });
    });

  }

  private saveToFileSystem(response, name: string): Blob {
    const contentDispositionHeader: string = response.headers.get('Content-Disposition');

    //for get original filename
    const parts: string[] = contentDispositionHeader.split(';');
    const filename = parts[1].trim().split('=')[1].trim();

    //get extension of the file
    const parts2: string[] = contentDispositionHeader.split('.');
    let ext = parts2[1];
    ext = ext.replace('"', '')
    //set mimetype

    const blob = new Blob([response.body], { type: 'YOURMIMETYPE'});
    FileSaver.saveAs(blob, name + '_ricetta.' + ext);

    return blob;
  }

Hope it helps you!!