js实现复制内容到剪贴板

方法一： 使用 js 实现

function copyToClipboard (text) {
    if(text.indexOf('-') !== -1) {
        let arr = text.split('-');
        text = arr[0] + arr[1];
    }
    var textArea = document.createElement("textarea");
      textArea.style.position = 'fixed';
      textArea.style.top = '0';
      textArea.style.left = '0';
      textArea.style.width = '2em';
      textArea.style.height = '2em';
      textArea.style.padding = '0';
      textArea.style.border = 'none';
      textArea.style.outline = 'none';
      textArea.style.boxShadow = 'none';
      textArea.style.background = 'transparent';
      textArea.value = text;
      document.body.appendChild(textArea);
      textArea.select();
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? '成功复制到剪贴板' : '该浏览器不支持点击复制到剪贴板';
       alert(msg);
      } catch (err) {
        alert('该浏览器不支持点击复制到剪贴板');
      }
      document.body.removeChild(textArea);
}

方法二： 使用 clipboard.min.js 实现

1.引入clipboard.min.js文件

2.选择一个可以确定被拷贝元素的选择器，本例中使用用的是id选择器，当然也可以使用class选择器、 基本的标签选择器等等

3.定义一个button按钮，注意按钮的属性：
　　data-clipboard-action="copy" data-clipboard-target="test"
　　其中data-clipboard-target属性就是第二步你定义的选择器

4.书写js,建立clipboard对象以及复制后执行的方法

<div id="test">hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="test">Copy</button>

<!-- 引入JS -->
<script src="../static/clipboard.min.js"></script>
<script>
     var clipboard = new Clipboard('.btn');
     clipboard.on('success', function(e) {
           console.log(e);
           console.info('Action:', e.action);
           console.info('Text:', e.text);
           console.info('Trigger:', e.trigger); 
           e.clearSelection();
     });
     clipboard.on('error', function(e) {
           console.log(e);
     });
</script>

**PS:如果根据需要剪贴板的内容需要自己定义 可以借鉴以下操作**

<button class="btnCopy">Copy</button>

<!-- 引入JS -->
<script src="../static/clipboard.min.js"></script>
<script>
     new Clipboard('.btnCopy', {
            text: function(trigger) {
                    //$(trigger) 为btn标签
                    var str="COPY内容";
                     return str;
             }
     });
</script>