javascript - 如何使用 react Hook 将 HTML 复制到剪贴板？

Question

我有一个包含表格的部分，现在我希望用户能够将表格的 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

问题是它将选定/突出显示的文本复制到剪贴板，因此您只需在运行 execCommand 之前以编程方式执行此操作。

1. 添加一个隐藏的输入(设置不可见和位置绝对/屏幕外)
2. 在复制函数中，将该输入的值设置为html
3. 使用选择事件选择隐藏的输入
4. execCommand(‘复制’);

编辑

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