Angular如何从API获取文件

Question

我有返回 PDF 文件的 API，但在 Angular 中，当我调用它时会出现此错误

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'

功能简单

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

我确定错误来自 Angular，因为我在 postman 中尝试过 API 并且效果很好

Answer 1

您需要在请求options 中传递responseType，以便Angular HttpClient 正确解析响应。默认情况下，Angular 需要 JSON 响应，因此您会收到此错误。

如果服务器返回blob，则将其添加到 responseType。它还支持text和arrayBuffer以获得更大的灵活性，因此请相应地配置responseType。

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

更多详情：https://angular.io/api/common/http/HttpClient#get