将对象转换为 JSON 并在 React 中下载为 .json 文件

IT技术 javascript json reactjs
2021-05-26 05:37:38

我有一个包含一些信息的 javascript 对象。我想将其转换为 JSON 并将其下载为 .json 文件。似乎我可以JSON.stringify(obj)将其转换为 JSON,但我如何将其实际下载为 .json 文件?

3个回答

如果您只是想通过 JavaScript 下载数据,我不确定这是一个特定于 React 的问题,但这是我使用的一个片段,它创建了一个链接来下载数据内容,虚拟地单击该元素,最后将其从DOM。它应该支持现代浏览器和旧版 IE:

private exportToJson(objectData: SomeObject) {
    let filename = "export.json";
    let contentType = "application/json;charset=utf-8;";
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      var blob = new Blob([decodeURIComponent(encodeURI(JSON.stringify(objectData)))], { type: contentType });
      navigator.msSaveOrOpenBlob(blob, filename);
    } else {
      var a = document.createElement('a');
      a.download = filename;
      a.href = 'data:' + contentType + ',' + encodeURIComponent(JSON.stringify(objectData));
      a.target = '_blank';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  }

还值得注意的是,正如this SO question中引用的那样,有多种方法可以解决这个问题

对于到达这里并寻找更简单解决方案的人:

         <a
            href={`data:text/json;charset=utf-8,${encodeURIComponent(
              JSON.stringify(YOURJSON)
            )}`}
            download="filename.json"
          >
            {`Download Json`}
          </a>

您将无法直接在计算机的文件系统上创建文件,因为这会带来巨大的安全风险。您不能从使用 JavaScript 的网页执行此操作。

您可以编写一个服务器端服务来发布您的状态并创建一个文件 - 然后您可以下载该文件或对您的服务器端存储它的位置感到满意。

另一种方式是通过 inMemory在内存中创建一个文件供用户下载,而不是通过服务器