你遇到的核心问题很典型：同一个HTTP请求里没法同时返回两种不同类型的响应（二进制PDF文件和JSON数据）。Fetch API会把服务器输出的所有内容都当成响应体捕获，所以你之前先输出PDF再返回JSON的逻辑，会把PDF的二进制内容混在响应里，导致前端既没法触发下载，也拿不到正确的JSON。

下面给你两种实用的解决方案，任选其一都能满足你的需求：

方案1：服务器生成PDF并保存，返回下载链接给前端 #

这种方法的思路是：PHP先把生成的PDF保存到服务器，然后给前端返回一个包含下载链接的JSON响应，前端拿到链接后用动态创建的<a>标签触发下载，同时执行后续逻辑。

PHP代码（genPdf.php） #

<?php
require('fpdf.php');
// 1. 生成PDF内容
$pdf = new FPDF();
$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
$pdf->Cell(40,10,'Hello World!');

// 2. 保存PDF到服务器（确保目标目录有写入权限）
$pdfFileName = uniqid().'.pdf';
$savePath = './generated_pdfs/'.$pdfFileName; // 建议用单独的目录存放生成的PDF
$pdf->Output('F', $savePath);

// 3. 返回包含下载链接的JSON响应
// 线上环境请替换成完整的域名路径，比如 "https://yourdomain.com/generated_pdfs/".$pdfFileName
$result = [
    "pdf" => "ok",
    "status" => true,
    "download_url" => $savePath
];
header('Content-Type: application/json');
echo json_encode($result);
?>

JavaScript代码 #

async function genPdf() {
  try {
    const response = await fetch('genPdf.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      }
    });
    const data = await response.json();
    
    if (data.status) {
      console.log("Server answer: PDF生成成功");
      // 动态创建a标签触发下载
      const downloadLink = document.createElement('a');
      downloadLink.href = data.download_url;
      downloadLink.download = 'my_generated.pdf'; // 自定义下载后的文件名
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
      
      // 这里写你的后续逻辑，比如提示用户、更新界面等
      console.log("后续逻辑执行中...");
    } else {
      console.log("Server answer: PDF生成失败");
    }
  } catch (error) {
    console.log("Server answer: 请求出错", error);
  }
}

优缺点：适合需要保留PDF文件的场景（比如用户后续可能重新下载），但需要服务器有存储空间，且要注意定期清理过期的PDF文件。

方案2：直接返回PDF二进制，用响应头传递状态 #

这种方法不需要在服务器保存PDF，PHP直接输出PDF的二进制内容，同时通过自定义响应头告诉前端生成状态，前端拿到响应后用Blob处理并触发下载。

PHP代码（genPdf.php） #

<?php
require('fpdf.php');
// 1. 生成PDF内容
$pdf = new FPDF();
$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
$pdf->Cell(40,10,'Hello World!');

// 2. 捕获PDF的二进制字符串
ob_start(); // 开启输出缓冲
$pdf->Output('S'); // 'S'参数表示返回PDF内容的字符串
$pdfContent = ob_get_clean(); // 获取缓冲内容并关闭缓冲

// 3. 设置响应头：告诉浏览器这是PDF文件，同时自定义头传递生成状态
header('Content-Type: application/pdf');
header('X-Pdf-Status: success'); // 自定义响应头，用于前端判断状态
header('Content-Disposition: attachment; filename="generated.pdf"'); // 强制浏览器下载
echo $pdfContent;
?>

JavaScript代码 #

async function genPdf() {
  try {
    const response = await fetch('genPdf.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      }
    });
    
    // 读取自定义响应头判断生成状态
    const pdfStatus = response.headers.get('X-Pdf-Status');
    if (pdfStatus === 'success') {
      console.log("Server answer: PDF生成成功");
      // 将响应转为Blob并创建下载链接
      const pdfBlob = await response.blob();
      const blobUrl = URL.createObjectURL(pdfBlob);
      
      const downloadLink = document.createElement('a');
      downloadLink.href = blobUrl;
      downloadLink.download = 'my_generated.pdf';
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
      
      URL.revokeObjectURL(blobUrl); // 释放Blob URL，避免内存泄漏
      
      // 执行后续逻辑
      console.log("后续逻辑执行中...");
    } else {
      console.log("Server answer: PDF生成失败");
    }
  } catch (error) {
    console.log("Server answer: 请求出错", error);
  }
}

优缺点：不需要服务器存储，节省空间，但没法保留生成的PDF文件，适合一次性下载的场景。

注意事项 #

• 方案1中，请确保generated_pdfs目录存在且服务器有写入权限，否则会保存失败。
• 线上环境中，方案1的下载链接要使用完整的域名路径，避免跨域或路径错误。
• 如果前端和PHP不在同一个域名下，需要在PHP中设置CORS响应头（比如header('Access-Control-Allow-Origin: *');）。

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