Angular下载PDF时出现Http解析失败问题求助

嘿，这个问题我帮很多刚接触Angular的开发者解决过，其实根源很简单——你用了HttpClient默认的JSON解析逻辑，但PDF是二进制文件，根本没法当成JSON来解析，所以才会抛出那个SyntaxError: Unexpected token % in JSON at position 0的错误（毕竟PDF文件开头都是%PDF-这类字符，JSON解析器完全摸不着头脑）。

下面给你两种可行的解决方案，按需选择：

方案一：专门写一个下载PDF的请求方法 #

直接创建一个返回Blob类型的请求方法，明确告诉HttpClient不要解析JSON：

protected getPdf(url: string, params: any): Observable<Blob> {
  return this.httpClient.get(url, {
    params: params,
    responseType: 'blob' // 核心：指定响应为二进制Blob类型
  });
}

然后调用这个方法，再通过浏览器的API触发下载：

// 调用示例
this.yourService.getPdf('https://your-pdf-url-here', { id: 123 })
  .subscribe({
    next: (blob) => {
      // 创建临时URL指向Blob文件
      const fileUrl = window.URL.createObjectURL(blob);
      // 创建隐藏的a标签触发下载
      const link = document.createElement('a');
      link.href = fileUrl;
      link.download = 'my-document.pdf'; // 自定义下载后的文件名
      document.body.appendChild(link);
      link.click();
      // 清理临时资源，避免内存泄漏
      window.URL.revokeObjectURL(fileUrl);
      document.body.removeChild(link);
    },
    error: (err) => {
      console.error('PDF下载失败:', err);
      // 这里可以加用户友好的错误提示，比如弹窗
    }
  });

方案二：改造现有泛型方法，支持下载场景 #

如果你想保留原来的get方法，同时让它兼容下载PDF的需求，可以加个参数控制响应类型：

protected get<T>(url: string, params: any, defaultResult: T, isDownload = false): Observable<T | Blob> {
  const requestOptions = isDownload 
    ? { 
        params: params,
        responseType: 'blob' as 'json' // 用类型断言绕开TypeScript的类型检查
      }
    : { params: params };

  return this.httpClient.get<T | Blob>(url, requestOptions);
}

调用的时候只需把最后一个参数设为true：

this.yourService.get<Blob>('https://your-pdf-url', {}, null, true)
  .subscribe(blob => {
    // 后续的下载逻辑和方案一一样
  });

额外提醒 #

• 确认服务器返回的响应头Content-Type是application/pdf，这样浏览器能正确识别文件类型，避免下载后打不开的问题。
• 如果你的请求需要身份验证（比如带Token），记得在请求头里带上Authorization字段，不然可能会遇到401/403权限错误。

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