Angular SyntaxError: Unexpected token P in JSON at position 0

Question

I'm trying to download an xls file with my angular application, this has worked before angular 8 and suddenly doesn't work anymore. Here is what I have so far:

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

In the angular documentation it mentioned something like HttpEvent<Blob>, I also tried this but it didn't work. I tried out this similar question: HttpClient - How to request non-JSON data But the solution did not work either since it basically said that it didn't accept the responseType in the given position.

I also checked the response headers of my request, the content-type is also application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

Here are my imports:

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

Can anyone point me in the right direction and help me solve this issue?

My console error NOTE

I got another issue after applying the accepted solution:

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

For this you should go here: Types of property 'responseType' are incompatible

Could you try providing the header { responseType: 'text' } ? I'm not sure this will work, but I'm not sure it won't either — user4676340
– user4676340, Commented Oct 3, 2019 at 13:43
@Maryannah same error, tried it with the headers and type of downloadFile and both separately . — Berend Hulshof
– Berend Hulshof, Commented Oct 3, 2019 at 13:46

Napinator · Accepted Answer · 2019-10-03 13:50:09Z

4

As mentioned in the post you referenced. The responseType: 'blob' is not an header but an option in the request. so your request should look like:

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

answered Oct 3, 2019 at 13:50

Napinator

5303 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Berend Hulshof Over a year ago

Wait what, I just ignored the error visual studio code gave me and it works, this is awkward...

Berend Hulshof Over a year ago

I also had to remove <Blob> because I got another exception that lead me to this question: stackoverflow.com/questions/49771603/…

Hikaru Shindo Over a year ago

No overload matches this call.

Myk Willis · Accepted Answer · 2019-10-03 13:55:00Z

0

I think you were on the right track with moving responseType, as it is an option for the request (i.e., to be interpreted by HttpClient), not a header (to be interpreted by the server receiving the request).

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

answered Oct 3, 2019 at 13:55

Myk Willis

12.9k5 gold badges50 silver badges65 bronze badges

Collectives™ on Stack Overflow

Angular SyntaxError: Unexpected token P in JSON at position 0

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related