javascript - 如何在按钮单击时复制 json 输出？

Question

我正在使用下面的插件来显示 json 。

https://www.npmjs.com/package/react-json-view .

我们可以有一个按钮来复制这个 json 吗？

https://codesandbox.io/s/async-pine-o6eho

return (
    <div className="App">
      <button
        onClick={() => {
          alert("---");
        }}
      >
        Copy
      </button>
      <ReactJson src={my_json_object} theme="monokai" />
    </div>
  );

我们可以在单击按钮时复制以下 json 输出吗？

Answer 1

您可以通过将 JSON 内容设置为临时输入并使用 document.execCommand('copy') 来复制 JSON。

function Copy(json) {
    const input = document.createElement("textarea");
    document.body.appendChild(input);
    input.value = JSON.stringify(json);
    input.select();
    document.execCommand("copy");
    document.body.removeChild(input);
}

Here是一个基于您的代码的工作示例。