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');
        einput.value = text;
        document.body.appendChild(einput);
        einput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        einput.className = 'einput';
        document.body.removeChild(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、调用 navigator.clipboard 的 API 必须是 https安全协议 访问，否则浏览器将不会暴露出该 API 调用时会报错失败，其次如果想访问剪切板的内容的话，需要两个条件: 第一必须是活动界面也就是说如果你切换到其他界面时，在访问原本界面的剪切板信息将不会执行;第二必须用户开启访问剪切板权限，否则不给访问。结合这些用户操作的安全性也得到了大大地提升~

　　2、报错 DOMException: Document is not focused.这是浏览器的安全控制，需要用户主动触发