如何使用反应挂钩将 HTML 复制到剪贴板？

Question

我有一个包含 table 的部分，现在我希望用户能够将 table 的 HTML 代码复制到剪贴板。

这是我在代码沙箱上的解决方案：live demo

Js代码如下

import React, { useState, useRef } from "react";

export default function App() {
  const tableRef = useRef(null);
  const [copySuccess, setCopySuccess] = useState("");

  const copyToClipboard = (e) => {
    const code =tableRef.current.innerHTML;
    console.log('code', code);
    document.execCommand("copy");
    e.target.focus();
    setCopySuccess("Copied!");
  };

  return (
    <div className="App">
      <div ref={tableRef} className="table">
        <table>
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
          </tbody>
        </table>
      </div>

      {document.queryCommandSupported("copy") && (
        <div>
          <button onClick={copyToClipboard}>Copy</button>
          {copySuccess}
        </div>
      )}
    </div>
  );
}

很遗憾，这不是复制 HTML 代码。

我需要更改什么才能将 HTML 复制到剪贴板。？

这里有什么问题？

Answer 1

问题是它将 selected/highlighted 文本复制到剪贴板，因此您只需要在运行 execCommand 之前以编程方式执行此操作。

添加隐藏输入（设置不可见和位置absolute/off-screen）
在复制函数中，将该输入的值设置为 html
select 带有 select 事件的隐藏输入
execCommand(‘复制’);

编辑

它可能适用于隐藏或设置显示的输入类型：none；但我依稀记得几年前我这样做时阻止了 select 事件。

如何使用反应挂钩将 HTML 复制到剪贴板？

How to copy HTML to clipboard using react hooks?

javascript

reactjs

react-hooks

use-ref