关于http协议运用剪贴板的兼容处理_http剪切板

关于http运用剪贴板的兼容处理

react里面的HTML元素

 <div id={'company-bank-info'}>
</div>
1
2

js

    // navigator clipboard 需要https等安全上下文
    if (navigator.clipboard && window.isSecureContext) {
      // navigator clipboard 向剪贴板写文本
      const DomInfo = document.getElementById('company-bank-info')
      navigator.clipboard.writeText(DomInfo.innerText)
      message.success('已复制')
    } else {
      // 创建text area
      let textArea = document.createElement("textarea");
      const DomInfo = document.getElementById('company-bank-info')
      textArea.value = DomInfo.innerText;
      // 使text area不在viewport，同时设置不可见
      textArea.style.position = "absolute";
      textArea.style.opacity = 0;
      textArea.style.left = "-999999px";
      textArea.style.top = "-999999px";
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      new Promise((res, rej) => {
        // 执行复制命令并移除文本框
        document.execCommand('copy') ? res() : rej();
        textArea.remove();
        message.success('已复制')
      });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26