typescript - Angular SyntaxError: JSON'de pozisyon 0'da beklenmeyen P karakteri

Angular uygulamamla bir xls dosyası indirmeye çalışıyorum, bu daha önce Angular 8'de çalışıyordu ve aniden artık çalışmıyor. Şu ana kadar sahip olduklarım şunlar:

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

Angular belgelerinde HttpEvent<Blob> gibi bir şeyden bahsediliyordu, ben de bunu denedim ama işe yaramadı. Benzer bir soruyu da denedim: HttpClient - JSON olmayan veriyi nasıl istenir Ama çözüm de işe yaramadı çünkü temelde verilen konumda responseType'ı kabul etmediğini söylüyordu.

Ayrıca isteğimin yanıt başlıklarını da kontrol ettim, içerik türü de application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

İşte ithalatlarım:

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

Biri bana doğru yönü gösterebilir ve bu sorunu çözmeme yardımcı olabilir mi?

Benim konsol hatam

NOT

Kabul edilen çözümü uyguladıktan sonra başka bir sorunla karşılaştım:

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

Bunun için buraya gitmelisiniz: 'responseType' özelliğinin türleri uyumsuz

Cevap #1

Bahsettiğiniz gönderide belirtildiği gibi. responseType: 'blob' bir başlık değil, istekte bir seçenektir. Bu nedenle isteğiniz şöyle görünmelidir:

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

Cevap #2

Bence responseType'ı taşımakla doğru yoldaydınız, çünkü bu istek için bir seçenektir (yani HttpClient tarafından yorumlanır), bir başlık değildir (isteği alan sunucu tarafından yorumlanacak).

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

İlgili makaleler