Angular 5 HTTP调用报JSON解析异常，原AngularJS 1正常

这个错误的根源很明确：Angular默认会把HTTP响应当作JSON来解析，但你的后端返回的是PDF二进制流，而且你错误地把response-type放在了请求头里——这不是Angular中设置响应类型的正确方式。

修复步骤 #

1. 正确设置响应类型
   在Angular的HTTP请求配置中，responseType是一个独立的选项，不属于请求头。你需要把它从headers里移出来，设置为'blob'，这样Angular就不会尝试解析JSON了。

   修改你的服务方法：

   testPDF(abc: FormArray): Observable<Blob> {
     const options = {
       headers: new HttpHeaders({
         'Content-type': 'application/json'
       }),
       responseType: 'blob' as 'json' // 类型断言解决TypeScript类型限制
     };
     // 替换成你的实际API端点
     return this.http.post<Blob>('/api/generate-pdf', abc.value, options);
   }
   

   这里的as 'json'是因为TypeScript的类型定义问题，直接设置'blob'会触发类型报错，用类型断言可以绕过这个限制。

2. 在组件中处理Blob并下载
   和AngularJS时代一样，你可以用file-saver来处理文件下载。先安装依赖：

   npm install file-saver @types/file-saver
   

   然后在组件中调用服务并下载：

   import { saveAs } from 'file-saver';
   
   // 组件中的下载方法
   downloadPDF() {
     this.yourPdfService.testPDF(this.yourFormArray).subscribe({
       next: (pdfBlob) => {
         saveAs(pdfBlob, 'my-document.pdf'); // 第二个参数是下载后的文件名
       },
       error: (error) => {
         console.error('PDF下载失败:', error);
       }
     });
   }
   

3. 确保后端Spring服务配置正确
   你的Spring REST服务需要正确设置响应头，告诉浏览器这是PDF文件：

   @PostMapping("/api/generate-pdf")
   public ResponseEntity<byte[]> generatePDF(@RequestBody YourRequestDto request) {
       // 生成PDF字节数组的逻辑
       byte[] pdfContent = yourPdfGenerationService.createPdf(request);
   
       HttpHeaders headers = new HttpHeaders();
       headers.setContentType(MediaType.APPLICATION_PDF);
       // 设置附件下载的文件名
       headers.setContentDispositionFormData("attachment", "my-document.pdf");
   
       return new ResponseEntity<>(pdfContent, headers, HttpStatus.OK);
   }
   

这样调整后，Angular就会正确接收二进制Blob数据，而不是尝试解析成JSON，自然就不会再出现JSON.parse的错误了。

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