js实现ctrlc, ctrlv功能

最新推荐文章于 2024-09-14 10:36:36 发布

原创最新推荐文章于 2024-09-14 10:36:36 发布 · 643 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一种使用JavaScript实现网页中复制（Ctrl+C）和粘贴（Ctrl+V）功能的方法。通过创建一个隐藏的div元素，并将表格数据放入其中，然后利用document.execCommand('Copy')来实现复制操作。该方法适用于那些需要自定义复制功能的网页应用。

js实现ctrlc, ctrlv功能

<span class="fd-oper" @click='copy'>复制链接</span>
copy(){
      var html = `<table id='tList' cellspacing='0' cellpadding='0' border='0'>
      <tr>
        <th style='border: 1px #99bbe8 solid; width:50px;'>序号</th>
        <th style='border: 1px #99bbe8 solid; width:150px;'>姓名</th>
        <th style='border: 1px #99bbe8 solid; width:200px;'>地址</th>
        <th style='border: 1px #99bbe8 solid; width:120px;'>性别</th>
        <th style='border: 1px #99bbe8 solid; width:120px;'>年龄</th>
      </tr>
      <tr>
        <td style='border: 1px #99bbe8 solid; width:50px;'>1</td>
        <td style='border: 1px #99bbe8 solid; width:150px;'>哈哈</td>
        <td style='border: 1px #99bbe8 solid; width:200px;'>地球村</td>
        <td style='border: 1px #99bbe8 solid; width:100px;'>男</td>
        <td style='border: 1px #99bbe8 solid; width:120px;'>18</td>
      </tr>
      <tr>
        <td style='border: 1px #99bbe8 solid; width:50px;'>2</td>
        <td style='border: 1px #99bbe8 solid; width:150px;'>嘻嘻</td>
        <td style='border: 1px #99bbe8 solid; width:200px;'>地球村</td>
        <td style='border: 1px #99bbe8 solid; width:100px;'>女</td>
        <td style='border: 1px #99bbe8 solid; width:120px;'>18</td>
      </tr>
      </table>`
      //将链接赋值给div
      var div = document.createElement("div");
      div.innerHTML = html;
      div.id = "copylinkdiv"
      document.body.appendChild(div);
      var text = document.getElementById("copylinkdiv");
      if (document.body.createTextRange) {
          var range = document.body.createTextRange();
          range.moveToElementText(text);
          range.select();
      } else if (window.getSelection) {
          var selection = window.getSelection();
          var range = document.createRange();
          range.selectNodeContents(text);
          selection.removeAllRanges();
          selection.addRange(range);
      } else {
          mini.alert('该浏览器不支持点击复制到剪贴板');
      }
      document.execCommand('Copy', 'false', null);
      document.body.removeChild(div);
    },