Angular客户端从PHP-API下载TCPDF生成的PDF文件损坏过小问题

问题根源 #

TCPDF的Output('temp.pdf', 'S')返回的是二进制PDF数据，但当前传输流程存在两个核心问题：

1. 客户端用Observable<string>接收二进制数据，会自动将其转成UTF-8编码字符串，破坏原始二进制流；
2. API侧响应头缺失必要标识，未正确声明文件类型与传输规则。

修复步骤 #

1. 修正PHP API侧代码 #

Model代码（无需修改）

$pdf->Output('temp.pdf', 'S')的用法正确，它会返回PDF的二进制字符串。

Controller代码修改：

补充完整响应头，确保客户端能正确识别二进制文件：

// $events为Model返回的二进制PDF字符串
$response->getBody()->write($events);
// 指定正确的PDF内容类型
$response = $response->withHeader('Content-Type', 'application/pdf');
// 设置下载标识与文件名
$response = $response->withHeader('Content-Disposition', 'attachment; filename="monthly_report.pdf"');
// 禁用缓存（可选但推荐）
$response = $response->withHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
$response = $response->withHeader('Pragma', 'no-cache');
$response = $response->withHeader('Expires', '0');
// 声明文件大小，避免客户端误判文件体积
$response = $response->withHeader('Content-Length', strlen($events));

return $response;

2. 修正Angular客户端代码 #

Service代码修改：

不能用string类型接收，需告诉HttpClient直接接收二进制Blob数据：

getMonthlyPdf(viewStart: Date, viewEnd: Date): Observable<Blob> {
  return this.http.post(`${environment.serviceHost}/events/monthlyPdf`, 
    { start: viewStart, end: viewEnd }, 
    { ...httpOptions, responseType: 'blob' } // 关键：指定响应类型为blob
  );
}

Controller代码修改：

直接处理Blob对象，无需额外转换：

async generateMonthly(): Promise<void> {
  const blob = await firstValueFrom(this.eventService.getMonthlyPdf(this.starttimeOfMonth, this.endtimeOfMonth));
  const downloadURL = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadURL;
  link.download = "monthly_report.pdf";
  link.click();
  // 释放URL对象，避免内存泄漏
  window.URL.revokeObjectURL(downloadURL);
}

关键注意点 #

• 客户端必须设置responseType: 'blob'，否则HttpClient会把二进制数据当成文本解析，直接导致文件损坏；
• API侧Content-Type设为application/pdf而非application/octet-stream，能让浏览器更准确识别文件类型；
• Content-Length头可让客户端获取真实文件大小，解决“体积过小”的显示问题。

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