angular - Hvordan motta fil med typen csv fra API-svar

Jeg har eksportknappen som treffer API-et og sender respons i .csv-format. Når jeg treffer API-et, sier responsen status: 200, men jeg får HttpErrorResponse i konsollen, og fikk denne feilen

SyntaxError: Unexpected token T in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad

Jeg har prøvd å spørre vennen min om at jeg må endre overskriften min, men jeg forstår ikke hvordan jeg skal gjøre det på riktig måte. Skal jeg sette overskriften innenfor Token Interceptor på samme måte som når jeg setter tokenet i overskriftene (hvis ja, hvordan kan jeg gjøre det?)? Eller hvordan kan jeg løse problemet mitt?

Dette er funksjonen som knappen utløste:

onExport = () => {
    this._service.getDataExport(1, 1, this.filter).subscribe(
      res => {
        console.log(res);
        // const filename = `MediaPreparation.csv`;
        // const blob = new Blob([res.data], { type: 'text/csv' });
        // saveAs(blob, filename);
      },
      err => console.log(err)
    );
  }

Dette er tjenesten som jeg traff:

getDataExport = (page = 1, perPage = 1, filter = null): Observable<any> => {
   const _url = `${this.base_url}/api/v1/media-preparation/export`;

   return this.http.post(_url, {
     page : page.toString(),
     perPage: perPage.toString(),
     filter : filter
   });
}

og dette er token-interceptoren:

import { AuthService } from './auth.service';
import { Injectable, Injector } from '@angular/core';
import { HttpInterceptor } from '@angular/common/http';

@Injectable()
export class TokenInterceptorService implements HttpInterceptor {

  constructor(private injector: Injector) { }

  intercept(req, next) {
    const authService = this.injector.get(AuthService);
    const tokenizedReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${authService.getToken()}`
      }
    });

    return next.handle(tokenizedReq);
  }
}

Takk for hjelpen, og jeg beklager for den dårlige forklaringen, jeg er fortsatt nybegynner i Angular.

Svar #1

Årsaken er enkel, HttpClient prøver å analysere svaret ditt som JSON, siden det er det mest vanlige scenariet og standardhandlingen.

For å forhindre at HttpClient parser svaret ditt, må du legge responseType: 'text' i dine httpOptions:

private httpOptions = {
  headers: new HttpHeaders({}),
  responseType: 'text'
};

Bruk deretter dette objektet som siste parameter i HTTP-metoden din (jeg antar GET):

this.http.get(url, httpOptions)
  .subscribe(res => {
    // res is just a string, you have to split it on new lines and commas
    // or you can use a third part library
  });

Merk:

Noen servere kan trenge å legge til en ikke-standard Accept-overskrift, for eksempel:

headers: new HttpHeader({
  Accept: 'text/csv'
});

Eller

headers: new HttpHeader({
  Accept: 'application/csv'
});

Eller (standard, men ikke semantisk):

headers: new HttpHeader({
  Accept: 'plain/text'
});

Relaterte artikler