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

score 2 · Accepted Answer · answered Dec 13 '21 at 10:58

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 '21 at 10:58

Kanishk Anand

1,686
1
7
16

thanks it worked but how can I download it? what to do with data after subscribe? – Osama Amr Dec 13 '21 at 11:04
@OsamaAmr Does this help? https://stackoverflow.com/questions/55963990/how-can-i-download-a-pdf-from-a-url-using-javascript – Kanishk Anand Dec 13 '21 at 11:06

Angular how to get file from API

1 Answers1