时间戳

首页 > 解决方案 > 如何在组件中将“.json”文件显示为文本以便可以复制和粘贴？

javascript - 如何在组件中将“.json”文件显示为文本以便可以复制和粘贴？

问题描述

我的应用程序为此目的制作了另一个软件，并且有一个动态 json 文件需要呈现给用户进行复制和粘贴。

我有 json 文件和代码，用户需要能够完全按原样复制该 json 文件。

当我尝试在我的 JSX 中包含大型 json 文件时，语法变得疯狂并引发错误。

我需要在我的 JSX 中包含什么，以便它可以完全按照写入 json 数据的方式显示我的 json 数据。

或者，我将如何设置一个 var myFile = myFile.json 然后在我的组件中显示该文件，以便用户可以复制和粘贴它？

标签： javascriptreactjs

解决方案

JSON.stringify()有一个内置的漂亮打印选项。4作为第三个参数（或您选择的缩进间距）传递以获得漂亮的输出。然后，将该输出放入<pre>标签（或添加了white-space: preCSS 样式以保留缩进的任何标签。）

例如

const exampleJson = { "name": "John", "age": 30, "car": null };

const prettyJson = JSON.stringify(exampleJson, null, 4); // indent 4 spaces

document.getElementById('json').textContent = prettyJson;

// EDIT: or just `return <pre>{prettyJson}</pre>` in jsx.
<body>
  <pre id='json'></pre>
</body>

至于复制，你可以让用户突出显示并复制，或者看看document.execCommand("copy")添加一个用户友好的按钮。

推荐阅读