Web应用实现读取写入剪贴板功能几种方式

Clipboard 接口实现了 Clipboard API，如果用户授予了相应的权限，其就能提供系统剪贴板的读写访问能力。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。

参考: https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard

Clipboard API 包括两个主要的接口：Clipboard 和 DataTransfer。Clipboard 接口用于操作系统剪贴板（例如 Windows 或 macOS 中的剪贴板），它包含以下方法：

• writeText(text: string): Promise<void>：将文本复制到剪贴板。
• readText(): Promise<string>：从剪贴板读取文本。

以下示例可直接使用，亲测有效

1、以下是一个使用 Clipboard 接口将文本剪贴板复制粘贴的示例：更多参考

<script>
　　// 将文本复制到剪贴板
　　navigator.clipboard
　　　　.writeText("Hello, World! Write")
　　　　.then(() => console.log("Text copied to clipboard"))
　　　　.catch((error) => console.error("Failed to copy text: ", error));

　　// 从剪贴板中读取数据
　　navigator.clipboard
　　　　.readText()
　　　　.then((text) => console.log("Text read from clipboard: ", text))
　　　　.catch((error) => console.error("Failed to read text from clipboard: ", error) );
</script>

2、实例Clipboard对象，使用html标签 data-clipboard-target ，需要点击触发。

<script type='text/javascript' src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>

<div id="foo">独孤那点事儿</div>

<a class="btn"  href="javascript:" data-clipboard-target="#foo" rel="noopener noreferrer">复制</a>

<script type="text/javascript">
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
       console.info('Success---:', e);
       e.clearSelection();
    });

    clipboard.on('error', function(e) {
       console.error('Error---:', e.action);
    });
</script>

<script type="text/javascript">
　　function copyText()
    {
        var text = document.getElementById("mytext").innerText;
        var einput = document.createElement('input');
        oInput.value = text;
        document.body.appendChild(einput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'einput';
        oInput.parentNode.removeNode(einput);
        alert('复制成功');
    }
</script>
<div cols="20" id="mytext">I am text： 12345678</div>
<input type="button" onClick="copyText()" value="点击复制代码" />

无感触发复制粘贴效果: 创建一个textarea元素，将要写入的内容放入textarea里，然后选择input，再调用浏览器的复制命令，将textarea里的内容复制，最后隐藏或移除textarea。

  <script>
      var text = 'ΦX-9hAf2vYA7jBEdcΦ';

      if (navigator.clipboard) {// clipboard api 复制
          navigator.clipboard.writeText(text);
      } else {var textarea = document.createElement('textarea');
          document.body.appendChild(textarea);
          // 隐藏此输入框
          textarea.style.position = 'fixed';
          textarea.style.clip = 'rect(0 0 0 0)';
          textarea.style.top = '10px';
          // 赋值
          textarea.value = text;
          // 选中
          textarea.select();

          // 复制
          document.execCommand('copy', true);
          // 移除输入框
          document.body.removeChild(textarea);
      }
    </script>

 注: 1、非点击触发的方式，线上需要SSL证书访问才有效   

       2、无效果也有可能是浏览器不支持或未获得授权导致的