html - Angular 6 - få csv-svar från httpClient

Kan någon vänligen ge ett exempel på att hämta application/octet-stream-svar från Angular 6 HttpClient. Jag använder koden nedan och det fungerar inte (jag får okänt fel - 401-svar) -

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);
    });
   }

Tjänsten är som följer -

 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'});
  }

Svar #1

För att hämta en application/octet-stream måste du sätta arraybuffer som responstyp i Angular HttpHeaders.

Detta är servicemetoden:

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;
            })
        );
}

Detta är anropet till servicemetoden och till saveAs-funktionen:

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

Som andra användare föreslår: 401 Obehörig är vanligtvis ett klientfel på grund av saknade autentiseringsuppgifter.

Svar #2

Detta fungerar för mig:

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);
});

Relaterade artiklar