typescript - Angular SyntaxError: Ov�ntat tecken P i JSON vid position 0

Jag försöker ladda ner en xls-fil med min Angular-applikation, detta har fungerat tidigare i Angular 8 och fungerar plötsligt inte längre. Här är vad jag har hittills:

  export(selectedUsers: any) {
    this.getReport(selectedUsers).subscribe(data => this.downloadFile(data));
  }

  private getReport(selectedUsers: number[]): Observable<Blob> {
        const headers = new HttpHeaders({'content-type' : 'application/json',
                                'Access-Control-Allow-Origin' : '*',
                                responseType : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
    return this.http.post<Blob>(this.globals.api + 'persoon/export', selectedUsers, {headers, 'blob'});
  }

  private downloadFile(data: Blob) {
    console.log('downloading...');
    const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = window.URL.createObjectURL(blob);
    window.open(url);
  }

I Angular-dokumentationen nämndes något som HttpEvent<Blob>, jag provade också detta men det fungerade inte. Jag testade denna liknande fråga: HttpClient - How to request non-JSON data Men lösningen fungerade inte heller eftersom den i princip sa att den inte accepterade responseType på den angivna platsen.

Jag kontrollerade också svarshuvudena för min begäran, content-type är också application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

Här är mina importeringar:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Mail } from './models/mail';
import { Klant } from './models/klant';
import { GlobalsService } from './globals.service';
import { Observable } from 'rxjs';

Kan någon visa mig i rätt riktning och hjälpa mig att lösa det här problemet?

Mitt konsolfel

OBS

Jag fick ett annat problem efter att ha tillämpat den accepterade lösningen:

the expected type comes from property 'responseType' which is declared here on type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }'

För detta bör du gå hit: Typer av egenskapen 'responseType' är inkompatibla

Svar #1

Som nämnts i inlägget du refererade till. responseType: 'blob' är inte en header utan ett alternativ i begäran. Så din begäran bör se ut så här:

  private getReport(selectedUsers: number[]): Observable<Blob> {
    const headers = new HttpHeaders({
      'content-type' : 'application/json',
      'Access-Control-Allow-Origin' : '*'
    });
    return this.http.post<Blob>(this.globals.api + 'persoon/export', selectedUsers, {headers, ResponseType: 'blob'});
  }

Svar #2

Jag tror att du var på rätt spår med att flytta responseType, eftersom det är ett alternativ för förfrågan (dvs. att tolkas av HttpClient), inte en header (att tolkas av servern som tar emot förfrågan).

  private getReport(selectedUsers: number[]): Observable<Blob> {
        const headers = new HttpHeaders({'content-type' : 'application/json',
                                'Access-Control-Allow-Origin' : '*'
                               );
        const options = {
            headers: headers,
            responseType: 'blob'
            };
    return this.http.post<Blob>(this.globals.api + 'persoon/export', selectedUsers, options);
  }

Relaterade artiklar