如何在点击按钮时触发 POST 请求并下载文件-js教程-PHP中文网

本文详细讲解在 next.js 13 客户端组件中，通过按钮点击发起 post 请求并正确触发 pdf（或其他二进制）文件下载的完整实现方案，解决 fetch 不自动下载的问题。

本文详细讲解在 next.js 13 客户端组件中，通过按钮点击发起 post 请求并正确触发 pdf（或其他二进制）文件下载的完整实现方案，解决 fetch 不自动下载的问题。

在 Next.js 应用中，使用发起 GET 请求时，浏览器会自动处理响应头中的 Content-Disposition: attachment 并触发文件下载；但通过 fetch() 发起的 POST 请求不会自动下载——即使 API 正确返回了 PDF Blob 和标准响应头，fetch 仅获取响应数据，不会触发浏览器下载行为。这是前端常见的“静默请求”陷阱。

要真正实现点击按钮下载文件，核心思路是：手动解析响应为 Blob → 创建临时对象 URL → 通过触发下载。以下是完整、健壮的实现：

async function generatePdf() {
  try {
    const response = await fetch("/api/generate-pdf", {
      method: "POST",
      headers: {
        "Content-Type": "application/json", // 注意：此处应为 application/json，非 application/pdf
      },
      body: JSON.stringify(store),
    });

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    const blob = await response.blob();
    const filename = response.headers.get("content-disposition")?.match(/filename="(.+)"/)?.[1] || "document.pdf";
    const url = window.URL.createObjectURL(blob);

    const a = document.createElement("a");
    a.href = url;
    a.download = filename; // 优先使用响应头中指定的文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url); // 清理内存
  } catch (error) {
    console.error("PDF generation failed:", error);
    alert("生成 PDF 失败，请检查控制台日志");
  }
}

<button onclick="{generatePdf}" type="button">
  Generate PDF
</button>

⚠️ 关键注意事项：

Meigen AI

一款AI图像与设计工具，主要用于AI 图片提示词资源库，收录大量可直接使用的视觉模板，整理 X 上最新火爆的 prompt，适用于生成产品图、品牌视觉及社交媒体配图，适合需要提升相关任务效率的用户。

下载

Content-Type 请求头错误修正：前端发送 POST 时，headers["Content-Type"] 应为 "application/json"（因你发送的是 JSON 字符串），而非 "application/pdf"；后者是响应头字段，不应出现在请求中。
响应头命名规范：API 中 content-disposition 应使用小写连字符（标准写法），但更推荐使用 Content-Disposition（首字母大写），确保兼容性；Next.js Response 构造函数对大小写不敏感，但保持规范更稳妥。
文件名提取逻辑：从 Content-Disposition 响应头中安全提取原始文件名（如 attachment; filename="report.pdf"），避免硬编码，提升可维护性。
内存清理：每次调用 URL.createObjectURL() 后，务必在下载完成后执行 URL.revokeObjectURL(url)，防止内存泄漏。
DOM 操作安全：动态创建元素并临时挂载到 document.body，确保在任意 React 组件上下文中均可正常工作（包括严格模式）。

此外，后端 API 路由需确保返回正确的 MIME 类型与响应头：

// app/api/generate-pdf/route.ts
export async function POST(request: Request) {
  try {
    const data = await request.json();
    // ... 业务逻辑：生成 PDF（例如使用 jsPDF）
    const generatedPdf = doc.output("blob"); // 返回 Blob 实例

    return new Response(generatedPdf, {
      status: 200,
      headers: {
        "Content-Type": "application/pdf",
        "Content-Disposition": 'attachment; filename="pac.pdf"',
      },
    });
  } catch (error) {
    return NextResponse.json({ error: "Failed to generate PDF" }, { status: 500 });
  }
}

✅ 总结：fetch + Blob + Object URL + 是目前最可靠、跨浏览器兼容的客户端文件下载方案，适用于所有二进制响应类型（PDF、Excel、ZIP 等）。它绕过了 fetch 的限制，完全复现了原生链接下载行为，是现代 Web 应用的标准实践。