如何在Angular服务中通过API获取PDF文件

我太懂这个困扰了！Angular的HttpClient默认会把服务器返回的响应自动解析成JSON格式，但你请求的是PDF二进制文件，这就导致了JSON解析失败的错误——毕竟PDF开头的%PDF-肯定不是合法的JSON嘛。

要解决这个问题，你只需要告诉Angular不要把响应解析成JSON，而是以blob（二进制大对象）的形式接收它就行。具体操作如下：

修改POST请求的配置 #

在http.post方法里添加第三个参数，明确指定responseType: 'blob'，这样Angular就会直接返回二进制数据，不会再尝试做JSON解析。

修改后的完整代码： #

params = { location: "report.pdf" };

this.http.post("http://ex.com/pdf", params, { responseType: 'blob' })
  .subscribe((data: Blob) => {
    const file = new Blob([data], { type: 'application/pdf' });
    const fileURL = URL.createObjectURL(file);
    window.open(fileURL);
  }, error => {
    // 可以在这里添加自定义的错误处理逻辑
    console.error('获取PDF文件失败:', error);
  });

关键说明： #

• 原来的代码没有指定responseType，默认值是json，所以Angular会自动用JSON.parse解析响应内容，自然就触发了解析错误。
• 设置responseType: 'blob'后，HttpClient会直接返回Blob对象，你可以直接用它生成文件URL并打开。
• 另外不需要再给post方法指定<Response>泛型了，直接指定<Blob>或者让TypeScript自动推断类型就好。

这样修改后，你的请求应该就能像在PostMan里那样正常获取并打开PDF文件啦！

内容的提问来源于stack exchange，提问作者Curtis