CODEWITHSUNDEEP
htmlnode.jsangulartypescripthttp
kadambari narotra
kadambari narotra

Reputation: 71

Angular 6 - get csv response from httpClient

Can any one please give an example of fetching application/octet-stream response from angular 6 httpClient. I am using the below code and it doesn't work ( I get unknown error - 401 response) - 

import { saveAs } from 'file-saver';

getJobOutput() {
    this.workflowService.fetchOutput(this.jobId,this.outputId).subscribe((response : any) => { // download file
              var blob = new Blob([response.blob()], {type: 'application/octet-stream'});
    var filename = 'file.csv';
    saveAs(blob, filename);
    });
   }

Service is as below - 

 fetchOutput(jobId : string, outputId) {
    var jobOutputURL = "myEnpoint";
     var params = this.createHttpAuthorization(jobOutputURL,"GET");
     params["format"] = "csv";
    const options = {
            headers: new HttpHeaders( { 'Content-Type': 'application/octet-stream',
                                        'Accept' : 'application/octet-stream',
                                        'Access-Control-Allow-Origin' : '*'}
                                    )};

    var endpoint = `${jobOutputURL}?oauth_consumer_key=${params["oauth_consumer_key"]}&oauth_signature_method=${params["oauth_signature_method"]}&oauth_nonce=${params["oauth_nonce"]}&oauth_timestamp=${params["oauth_timestamp"]}&oauth_version=1.0&format=${params["format"]}&oauth_signature=${params["oauth_signature"]}`;
return this.httpClient.get(endpoint, {...options, responseType: 'blob'});
  }

Upvotes: 4

Views: 12687

Answers (2)

Tejas Hirpara
Tejas Hirpara

Reputation: 41

This works for me:

this.httpClient.get(endpoint, {...options, responseType: 'text'}).subscribe((data: any) => {
    const a = document.createElement("a");
    a.href = "data:text/csv," + data;
    let filename = "CSVDownload";
    a.setAttribute("download", filename + ".csv");
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
},
(error) => {
    console.log('error', error);
});

Upvotes: 0

Julien Ambos
Julien Ambos

Reputation: 2088

To fetch an application/octet-stream, you have to set arraybuffer as the response type in the Angular HttpHeaders.

This is the service method:

fetchOutput(): Observable<ArrayBuffer> {
    let headers = new HttpHeaders();

    const options: {
        headers?: HttpHeaders;
        observe?: 'body';
        params?: HttpParams;
        reportProgress?: boolean;
        responseType: 'arraybuffer';
        withCredentials?: boolean;
    } = {
        responseType: 'arraybuffer'
    };

    return this.httpClient
        .get('https://your-service-url.com/api/v1/your-resource', options)
        .pipe(
            map((file: ArrayBuffer) => {
                return file;
            })
        );
}

This is the call to the service method and to the saveAs function:

this.yourService
    .fetchOutput()
    .subscribe((data: any) => {
        const blob = new Blob([data], { type: 'application/octet-stream' });
        const fileName = 'Your File Name.csv';
        saveAs(blob, fileName);
    })

As other users are suggestion: 401 Unauthorized is usually a client side error due to missing credentials.

Upvotes: 9

Related Questions