如何从 Nextjs API 路径下载 PDF

Question

我正在开发一个应用程序，允许用户从列表中下载 PDF 文件，我可以通过调用 MuleSoft 端点来访问此文件，它的设置是这样当用户点击下载按钮时，对 nextjs api 路由的调用是触发了

  const handleDownload = async () => {
    console.log('Downloading', documentKey);
    await fetch(`/api/retrive/${documentKey}`);
  };

/api/retrive/[documentKey]/route.ts

看起来像这样：

import { NextRequest } from "next/server";

type Params = {
  documentKey: string;
}

export async function GET(_: NextRequest, context: { params: Params }) {
  const documentKey = context.params.documentKey;

  const res = await fetch(`<my api endpoint>/api/v1/documents/${documentKey}`, {
    headers: {
      'Content-Type': 'application/json',
      client_id: process.env.CLIENT_ID,
      client_secret: process.env.CLIENT_SECRET
    },
    method: "GET",
  });

  const data = await res.json();
  // const base64Str = Buffer.from(data.content, 'utf8').toString('base64');

  const resData = await fetch(`data:${data.contentType},${data.content}`)
  const pdf = await resData.blob();
  console.log({ pdf })

  const headers = new Headers();
  headers.append("Content-Disposition", `attachment; filename="${data.documentName}"`);
  headers.append("Content-Type", data.contentType);

  return new Response(pdf, {
    headers,
  })
}

data

一些回复：

{
  content: <base64 encoded>,
  contentType: 'application/pdf',
  documentName: 'sample.pdf'
}

当我

console.log({ pdf })

我可以看到详细信息和文件大小，但没有触发下载，我错了什么？

Answer 1

当您使用

fetch

发出请求时，响应将传回您的代码进行处理。浏览器不会根据对

fetch

调用的响应自动开始下载或执行任何操作。如果您使用

fetch

，则需要编写代码来对响应执行某些操作。

如果您希望浏览器下载文件，您可能不想使用

fetch

，而应该使用 api 路由的链接，而不是触发

fetch

的按钮。