如何在 Vue.js 中将 InnerHtml 复制到剪贴板？答案

【问题标题】：How to copy InnerHtml to clipboard in Vue.js?如何在 Vue.js 中将 InnerHtml 复制到剪贴板？
【发布时间】：2019-06-08 07:02:08
【问题描述】：

我想将此 for 循环的内容复制到剪贴板：

<div ref="text" class="links">
        <div class="row" v-for="(name, index) in resultNames" :key="index" >                                    
            <p>{{makeUrl(name)}} </p>
        </div>   
</div>  
<button   @click="handleCopy">Copy to Clipboard</button>

我跟着this的回答想出了这个方法：

  handleCopy() {
     this.$refs.text.select();
     document.execCommand('copy');
    }

但这会导致：

Uncaught TypeError: this.$refs.text.select is not a function

所以我不知道如何在不使用第三方 javascript 插件的情况下解决这个问题？

P.S.我尝试了一些 JS 特定的建议答案，例如 this，但得到错误：

Uncaught TypeError: Failed to execute 'selectNode' on 'Range': parameter 1 is not of type 'Node'.

【问题讨论】：

您可以简单地将数据镜像到隐藏的<textarea> 并使用它。
您需要将innerHTML 放入textarea 中，然后选择并复制它。
@ChrisG 我该怎么做？
How do I copy to the clipboard in JavaScript? 的可能重复项更具体地说 - this answer
对我来说很好：codesandbox.io/s/484yxqpmm4

标签： javascript vue.js

【解决方案1】：

根据this 的回答，这里有一个选择HTMLElement 文本的函数：

selectText(element) {
  var range;
  if (document.selection) {
    // IE
    range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  } else if (window.getSelection) {
    range = document.createRange();
    range.selectNode(element);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  }
}

剩下要做的是 a) 传递元素 b) 调用复制命令：

this.selectText(this.$refs.text); // e.g. <div ref="text">
document.execCommand("copy");

【讨论】：

它不起作用 - 出现错误消息： v-on 处理程序中的错误：“TypeError：无法在 'Range' 上执行 'selectNode'：参数 1 不是 'Node' 类型。”当我将 div 的 ref 作为参数时。
@Schroet 确保您的 div 仅包含要复制的文本，在我的情况下，我用它来复制电话号码： {{ phone_icon.phone }} 跨度>

【解决方案2】：

你可以在 npm:vue-clipboard 上使用 vue 插件

让我们首先制作您要复制的html数据。之后我们就可以使用npm插件来复制html数据了

new Vue({
    el: '#app',
    data: {
        HTMLcontent:'',
        resultNames:["John","Steward","Rock"]
    },
    created() {
    },
    methods:{
        makeData(){
            var self = this;
            for(var i = 0; i < self.resultNames.length; i++){
                self.HTMLcontent += '<p>'+self.resultNames[i]+'</p>';
            }
        },
        copyData(){
            this.makeData();
            console.log(this.HTMLcontent);
        }
    }
});

然后安装一个 vue 插件

npm install --save v-clipboard
import Clipboard from 'v-clipboard'
Vue.use(Clipboard)

之后对copyData函数进行如下修改

copyData(){
    this.makeData();
    this.$clipboard(this.invite_code);
    alert("Copied to clipboard");
}

希望能解决您的问题

【讨论】：

对于 vue 2 使用 npmjs.com/package/vue-clipboard2

【解决方案3】：

遇到了同样的问题，但是 vue 剪贴板和剪贴板 2 对我没有帮助

在复制到剪贴板的结果中，我使用了 JQuery 和 vue 事件

HTML 部分

<div class="input-group">
  <input type="text" class="form-control copyLinkInput" :value="link">
  <div class="input-group-append" @click="doCopy">
    <div class="input-group-text">
      <i class="fas fa-copy"></i>
    </div>
  </div>
</div>

Vue.js 部分

...

props: ['link'],
methods: {
  doCopy: function (e) {
    let selectEl = $(e.target).parents('.input-group').find('.copyLinkInput')[0];

    selectEl.select();
    document.execCommand("copy");
  }
}

...

【讨论】：