我的应用程序为此目的制作了另一个软件,并且有一个动态 json 文件,需要提供给用户进行复制和粘贴。
我有 json 文件和代码,用户需要能够准确地复制该 json 文件。
当我尝试将大型 json 文件包含在 JSX 中时,语法会变得疯狂并引发错误。
我需要在 JSX 中包含什么,以便它可以完全按照写入的 json 数据显示我的 json 数据。
或者,我如何设置 var myFile = myFile.json 然后在我的组件中显示该文件以便用户可以复制并粘贴它?
最佳答案
JSON.stringify()
有一个内置的 pretty-print 选项。通行证 4
作为第三个参数(或您选择的缩进间距)以获得漂亮的输出。然后,将该输出放入 <pre>
标签(或添加 white-space: pre
CSS 样式以保留缩进的任何标签。)
例如
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")
添加一个用户友好的按钮。
关于javascript - 如何在组件中将 ".json"文件显示为文本,以便可以复制和粘贴?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51140921/