将表格复制到vue.js中的剪贴板

我正在尝试将div元素复制到vuejs中的剪贴板。我已经通过搜索相关的解决方案和申请。但不起作用。我想把完整的表格复制到剪贴板上。提前谢谢

 <button v-on:click = "copyToClipboard(select_txt)">Click To Copy</button>
                <table class="table table-sm" id="select_txt">
                    <tr>
                        <td>Name</td>
                        <td> abcd </td>
                    </tr>
                    <tr>
                        <td>Phone</td>
                        <td>124545</td>
                    </tr>
                </table>

---

您在选择节点时出错

copyToClipboard(containerid){
            var range = document.createRange();
            let containerNode = document.getElementById(containerid); //// this part
            range.selectNode(containerNode); //// this part
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
            document.execCommand("copy");
            window.getSelection().removeAllRanges();
            alert("data copied");
        }

复制html代码的步骤

copyToClipboard(containerid) {
      let containerNode = document.getElementById(containerid);
      var textArea = document.createElement("textarea");
      textArea.style.position = "fixed";
      textArea.style.top = 0;
      textArea.style.left = 0;

      // Ensure it has a small width and height. Setting to 1px / 1em
      // doesn't work as this gives a negative w/h on some browsers.
      textArea.style.width = "2em";
      textArea.style.height = "2em";

      // We don't need padding, reducing the size if it does flash render.
      textArea.style.padding = 0;

      // Clean up any borders.
      textArea.style.border = "none";
      textArea.style.outline = "none";
      textArea.style.boxShadow = "none";

      // Avoid flash of white box if rendered for any reason.
      textArea.style.background = "transparent";

      textArea.value = containerNode.outerHTML;

      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      document.execCommand("copy");
      window.getSelection().removeAllRanges();
      document.body.removeChild(textArea);
      alert("data copied");
    }

---

感谢您的回复，但它显示对“范围”执行“selectNode”失败的错误：参数1不是“Node”类型。我的沙箱。检查这一点，你在Html方面做得不对。您可能必须向函数发送字符串作为参数。添加报价。非常感谢。它起作用了。我想复制像abc这样的html表格。。。。。等等。你能帮我吗？var target=document.getElementById（'myElement'）；var wrap=document.createElement（'div'）；appendChild（target.cloneNode（true））；警报（wrap.innerHTML）；

copyToClipboard(containerid) {
      let containerNode = document.getElementById(containerid);
      var textArea = document.createElement("textarea");
      textArea.style.position = "fixed";
      textArea.style.top = 0;
      textArea.style.left = 0;

      // Ensure it has a small width and height. Setting to 1px / 1em
      // doesn't work as this gives a negative w/h on some browsers.
      textArea.style.width = "2em";
      textArea.style.height = "2em";

      // We don't need padding, reducing the size if it does flash render.
      textArea.style.padding = 0;

      // Clean up any borders.
      textArea.style.border = "none";
      textArea.style.outline = "none";
      textArea.style.boxShadow = "none";

      // Avoid flash of white box if rendered for any reason.
      textArea.style.background = "transparent";

      textArea.value = containerNode.outerHTML;

      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      document.execCommand("copy");
      window.getSelection().removeAllRanges();
      document.body.removeChild(textArea);
      alert("data copied");
    }