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

Posted 2023-02-22

【中文标题】在 React 中将 Object 转换为 JSON 并下载为 .json 文件

【英文标题】：Converting Object into JSON and downloading as a .json file in React

【发布时间】：2018-12-15 08:56:22

【问题描述】：

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

【参考方案1】：

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

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

【讨论】：

使用 JSON.stringify(YOURJSON, null, '\t') 也会下载格式化的 json。我已提议更改。

【参考方案2】：

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

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

通过 inMemory 的另一种方式Create a file in memory for user to download, not through server

【参考方案3】：

如果您只是想通过 JavaScript 下载数据，我不确定这是一个特定于 React 的问题，但这是我使用的一个 sn-p，它创建一个链接来下载数据内容，虚拟点击元素，最后将其从 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);
    
  

还值得注意的是，有多种方法可以解决此问题，如引用 in this SO question。

【讨论】：

这会将 json 数据存储为 "\"name\":\"cliff\",\"age\":\"34\"" f.e.有没有办法美化它，以便删除转义字符并且每个值都在新行上？

有趣的是，我无法复制转义字符问题，但对于漂亮的打印，您可以使用JSON.stringify 的第三个参数，例如JSON.stringify(objectData, null, 2)，其中将包括LF用于漂亮打印的字符和被字符串化对象中每个深度级别的 2 个空格。

我将单独添加JSON.stringify 的第二个参数是一个替换器，它可以是一个修改对象中键和值的函数。我想您可以使用类似于this answer 中提供的功能来修复正在打印的无关字符