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

CodePudding user response：

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