Angular SyntaxError：位置 0 处 JSON 中的意外标记 P答案

【问题标题】：Angular SyntaxError: Unexpected token P in JSON at position 0Angular SyntaxError：位置 0 处 JSON 中的意外标记 P
【发布时间】：2019-10-04 01:04:23
【问题描述】：

我正在尝试使用我的 Angular 应用程序下载一个 xls 文件，这在 Angular 8 之前已经有效，但突然不再有效。这是我目前所拥有的：

  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 文档中提到了 HttpEvent<Blob> 之类的内容，我也尝试过，但没有成功。我尝试了这个类似的问题：HttpClient - How to request non-JSON data 但该解决方案也不起作用，因为它基本上说它不接受给定位置的 responseType。

我还检查了我的请求的响应头，内容类型也是application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

这是我的导入：

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

谁能指出我正确的方向并帮助我解决这个问题？

我的控制台错误 注意

应用接受的解决方案后我遇到了另一个问题：

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

为此你应该去这里：Types of property 'responseType' are incompatible

【问题讨论】：

您可以尝试提供标题{ responseType: 'text' } 吗？我不确定这会奏效，但我不确定它也不会
@Maryannah 同样的错误，分别尝试了下载文件的标题和类型。

标签： angular typescript

【解决方案1】：

正如您引用的帖子中所述。 responseType: 'blob' 不是标头，而是请求中的一个选项。所以你的请求应该是这样的：

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

【讨论】：

等等，我只是忽略了 Visual Studio 代码给我的错误，但它可以工作，这很尴尬......
我还必须删除因为我遇到了另一个导致我提出这个问题的异常：stackoverflow.com/questions/49771603/…
没有重载匹配这个调用。

【解决方案2】：

我认为移动responseType 是正确的，因为它是请求的一个选项（即由HttpClient 解释），而不是标头（由接收请求的服务器解释） )。

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

【讨论】：