如何使用 API 路由在 Next.js 上下载文件

我正在使用 next.js。我有一个第三方服务，我需要从中检索 PDF 文件。该服务需要一个 API 密钥，我不想在客户端公开该密钥。

这是我的文件

/api/getPDFFile.js ...

  const options = {
    method: 'GET',
    encoding: 'binary',
    headers: {
      'Subscription-Key': process.env.GUIDE_STAR_CHARITY_CHECK_API_PDF_KEY,
      'Content-Type': 'application/json',
    },
    rejectUnauthorized: false,
  };

  const binaryStream = await fetch(
    'https://apidata.guidestar.org/charitycheckpdf/v1/pdf/26-4775012',
    options
  );
  
  return res.status(200).send({body: { data: binaryStream}}); 

页面/getPDF.js

   <button type="button" onClick={() => {
  fetch('http://localhost:3000/api/guidestar/charitycheckpdf',
    {
      method: 'GET',
      encoding: 'binary',
      responseType: 'blob',
    }).then(response => {
      if (response.status !== 200) {
        throw new Error('Sorry, I could not find that file.');
      }
      return response.blob();
    }).then(blob => {
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.setAttribute('download', 'test.pdf');
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
    })}}>Click to Download</button>

单击该按钮会下载文件，但当我打开它时，我看到错误消息“无法加载 PDF 文档”。

您似乎正在使用node-fetch https://www.npmjs.com/package/node-fetch。所以，你可以这样做：

// /pages/api/getAPI.js

import stream from 'stream';
import { promisify } from 'util';
import fetch from 'node-fetch';

const pipeline = promisify(stream.pipeline);
const url = 'https://w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf';

const handler = async (req, res) => {
  const response = await fetch(url); // replace this with your API call & options
  if (!response.ok) throw new Error(`unexpected response ${response.statusText}`);

  res.setHeader('Content-Type', 'application/pdf');
  res.setHeader('Content-Disposition', 'attachment; filename=dummy.pdf');
  await pipeline(response.body, res);
};

export default handler;

然后从客户端：

// /pages/index.js

const IndexPage = () => <a href="/api/getPDF">Download PDF</a>;
export default IndexPage;

代码沙盒链接 https://codesandbox.io/s/compassionate-albattani-jmdd1?file=/pages/api/getPDF.js（打开部署的 URL https://jmdd1.sse.codesandbox.io/在新选项卡中查看它的工作情况）

参考：

• API 路线 | Next.js https://nextjs.org/docs/api-routes/introduction
• 流 |节点获取 https://github.com/node-fetch/node-fetch#streams
• 如何将 pdf 文件从 Node/Express 应用程序发送到浏览器 https://stackoverflow.com/a/31106110/11613622
• <a>：锚元素| MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download

PS：我认为在这种情况下不需要太多的错误处理。如果您希望向您的用户提供更多信息，您可以。但这么多代码也能正常工作。如果出现错误，文件下载将失败并显示“服务器错误”。另外，我认为没有必要创建blob网址先。您可以直接在您的应用程序中下载它，因为 API 是同源的。

Earlier 我曾经用过 https://codesandbox.io/s/reverent-tu-q5t9r?file=/pages/api/getPDF.js request https://www.npmjs.com/package/request，也将其发布在这里以防有人需要：

import request from 'request';
const url = 'https://w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf';
export default (_, res) => { request.get(url).pipe(res); };