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

Posted

技术标签:

【中文标题】如何在组件中将“.json”文件显示为文本以便可以复制和粘贴?【英文标题】:How to display a ".json" file as text in component so it can be copied and pasted? 【发布时间】:2018-12-10 23:05:05 【问题描述】:

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

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

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

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

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

【问题讨论】:

所以将其输出到文本区域以便他们可以复制它? 您实际上是在问两件事:1)如何获取 Json 文件的内容,以及 2)如何漂亮地显示这些内容。第一个答案见here,第二个答案见下文。 【参考方案1】:

JSON.stringify() 有一个内置的漂亮打印选项。传递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")添加一个用户友好的按钮。

【讨论】:

【参考方案2】:

您可以在组件的 render 方法中执行类似的操作:

var prettifyJson = JSON.stringify(myFile, null, 4);

<pre> prettifyJson </pre>

【讨论】:

以上是关于如何在组件中将“.json”文件显示为文本以便可以复制和粘贴?的主要内容,如果未能解决你的问题,请参考以下文章

如何在Android Studio中将Pdf文件转换为文本

如何在Android中将大型json数组拆分为页面

如何在 react-native 函数组件中将获取数据设置为文本字段

我可以将 UIImage 作为文本放在 textview 中,以便我可以在 ios 中将它们作为文本删除

如何使用 PDFJS 突出显示文本?

如何在c#mvc中将Json结果转换为对象