Slim4+Angular10 PDF下载API：Angular Blob响应返回空数据问题

下面是针对该问题的排查和解决步骤：

1. 强制Angular请求使用blob响应类型 #

Angular默认会把响应解析为JSON，这会破坏PDF的二进制数据，导致Blob为空。必须在请求配置中明确指定responseType: 'blob'：

// GET请求示例
this.http.get('/api/download-pdf', { 
  responseType: 'blob' 
}).subscribe((blob: Blob) => {
  // 触发下载的逻辑
  const downloadUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'your-file.pdf'; // 或从响应头获取文件名
  link.click();
  window.URL.revokeObjectURL(downloadUrl);
});

// POST请求示例（如果需要传参数）
this.http.post('/api/generate-pdf', postData, {
  responseType: 'blob'
}).subscribe(blob => {
  // 同上下载逻辑
});

2. 检查Slim4后端的输出是否规范 #

后端的任何额外输出（空格、调试日志、错误信息）都会污染PDF的二进制数据，导致前端解析出空Blob。确保后端代码符合以下要求：

• 输出前无多余字符：PHP文件开头<?php前不能有空格，代码中不要有echo、var_dump等调试输出
• 正确设置响应头和输出PDF内容：

use Slim\Psr7\Response;

$app->get('/api/download-pdf', function ($request, $response) {
    $pdfFile = __DIR__ . '/storage/your-document.pdf';
    
    if (!file_exists($pdfFile)) {
        return $response->withStatus(404)->write('PDF not found');
    }

    // 读取并写入PDF内容到响应体
    $response->getBody()->write(file_get_contents($pdfFile));
    
    return $response
        ->withHeader('Content-Type', 'application/pdf')
        ->withHeader('Content-Disposition', 'attachment; filename="your-document.pdf"')
        ->withHeader('Content-Length', filesize($pdfFile))
        ->withHeader('Access-Control-Expose-Headers', 'Content-Disposition, Content-Length');
});

3. 排查Angular HTTP拦截器的影响 #

如果你的项目中使用了HTTP拦截器，检查拦截器是否对响应做了不必要的转换。比如某些拦截器会尝试把所有响应转为JSON，这会直接破坏Blob数据。

修改拦截器逻辑，对PDF请求跳过JSON转换：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 如果是下载PDF的请求，跳过JSON解析
  if (request.responseType === 'blob') {
    return next.handle(request);
  }
  
  // 其他请求的正常拦截逻辑
  return next.handle(request).pipe(
    // ...你的其他操作
  );
}

4. 验证响应体的完整性 #

在浏览器网络面板的「Response」标签查看PDF内容：

• 如果能看到正常的二进制乱码（或浏览器直接渲染PDF），说明后端输出没问题
• 在Angular的订阅回调中打印Blob的大小：

.subscribe((blob: Blob) => {
  console.log('Blob size:', blob.size); // 正常应该大于0
  console.log('Blob type:', blob.type); // 应该是application/pdf
}, err => {
  console.error('请求错误:', err);
});

如果blob.size为0，说明响应在传输或解析过程中被截断，回到步骤2检查后端输出是否有多余字符。

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