Angular how to get file from API

Question

I have API that returns PDF file, but in Angular when I call it it gives me this error

Http failure during parsing for http://localhost:1234/hebaback/public/api/download-report-20
error: SyntaxError: Unexpected token % in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…, text: '%PDF-1.3\n%�߬�\n3 0 obj\n<</Type /Page\n/Parent 1 0 R\n…1728F9DC34CF5EC66FE> ]\n>>\nstartxref\n2887591\n%%EOF'

the function is simple

downloadReport(id: any): Observable<any> {
    return this._HttpClient.get(`http://localhost:1234/hebaback/public/api/download-report-${id}`)
}

I am sure that the error is from angular because I tried the API in postman and it works well

Kanishk Anand · Accepted Answer · 2021-12-13 10:58:30Z

2

You need to pass the responseType in the request options for Angular HttpClient to correctly parse the response. By default, Angular expects a JSON response, and hence, you're getting this error.

If server is returning blob then add it in the responseType. It also supports text and arrayBuffer for more flexibility, so configure the responseType accordingly.

return this._HttpClient.get(`http://localhost:1234/hebaback/public/api/download-report-${id}`, {responseType : 'blob'})

More details : https://angular.io/api/common/http/HttpClient#get

answered Dec 13, 2021 at 10:58

Kanishk Anand

1,7121 gold badge9 silver badges17 bronze badges

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

2 Comments

Osama Amr Over a year ago

thanks it worked but how can I download it? what to do with data after subscribe?

Kanishk Anand Over a year ago

@OsamaAmr Does this help? stackoverflow.com/questions/55963990/…

Collectives™ on Stack Overflow

Angular how to get file from API

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related