如何创建一个 json 文件，然后在获取请求中返回它以响应应用程序

Question

我正在尝试创建一个 JSON 文件 sample.json，并且我正在尝试在我的 Spring Boot 后端控制器中创建此文件，并能够将其发送到我的 React 应用程序，它将触发将文件下载到客户端

我想确保我实际上是从 http get 请求给出的响应中返回实际文件，并且我想知道如何触发该实际响应的下载 反应

fetch('/api/download')
  .then((res) => {
     return res.blob();
  }).then((body) => {
      console.log(body);
      setTimeout(() => {
         URL.createObjectURL(body)
      }, 300);
  }).catch((error) => {
     console.log(error);
  })

我的最终目标是能够让后端生成的文件通过获取请求并能够触发下载，请告诉我这是怎么可能的。谢谢。

Answer 1

最简单的方法是不使用fetch，而是使用普通的链接元素：

<a href="/api/download" download="sample.json">Click to download</a>

在所有现代浏览器中，download 属性将导致浏览器将链接响应保存为文件。不需要fetch。

但是，如果您绝对需要 fetch 操作，那么您基本上可以在 JS 本身中执行此操作：获取您的结果，然后创建一个 <a>，将其 href 属性设置为文件 blob，并确保download 属性已设置：

fetch(...)
.then(res => res.blob())
.then(blob => {
  const blobURL = URL.createObjectURL(blob);

  // create our <a> to force a download for the response
  const dl = document.createElement(`a`);
  dl.href = blobURL;
  dl.download = `sample.json`;

  // In order for the link to "trigger" we need to add it to the document.
  // If we don't, dl.click() won't do anything. So add it, click it, then remove it.
  dl.style.display = `none`;
  document.body.appendChild(dl);
  dl.click();
  document.body.removeChild(dl);
});