如何在 Vue 中使用 v-for 将显示的全部数据复制到剪贴板

Question

我使用显示线程转储信息的卡片显示页面。 Threaddump 信息使用 v-for 显示，问题是当我复制时，它使用我当前的 copyThreadInfoToClipboard 方法仅复制单个数据循环。所以，我的要求是，

如何复制整个数据循环？
如何像本例中的 <span> 和 <pre> 标签那样转义复制的选择文本中的子元素标签。我不希望复制的文本包含 <code data-v-ea65a43e="">，我可以将 id 放在每个单独的元素上并尝试复制，但是有没有一种方法可以使用单个 id 进行复制，该 id 将成为父元素并跳过/删除复制文本中的子元素标签，但它应该包含子元素内部文本，我只是希望我复制的文本不包含 sun 元素 HTML 标签。

代码沙箱在这里：click

    <template>
  <b-row>
    <b-col>
      <b-card class="shadow border-0">
        <b-button
          size="sm"
          @click.prevent="copyThreadInfoToClipboard('thread-id')"
          >Copy to clipboard</b-button
        >
        <b-card-text
          id="thread-id"
          class="text-monospace"
          v-for="thread in allThreads"
          :key="thread.threadName"
        >
          "{{ thread.threadName }}" #{{ thread.id }} state:{{
            thread.threadState
          }}
          cpu-time:{{ thread.cpuTime }} user-time:{{ thread.userTime }}
          <span v-if="thread.lockName != null"
            >Lock-name: {{ thread.lockName }} </span
          ><span v-if="thread.getLockOwnerName != null"
            >Lock-owner-name: {{ thread.getLockOwnerName }}</span
          >
          <br />
          <code id="line-break"> {{ thread.stacktrace }}</code>
        </b-card-text>
      </b-card>
    </b-col>
  </b-row>
</template>

<script>
export default {
  data(){
    return{
      allThreads:[{
            "isThreadCpuTimeSupported": "true",
            "getLockOwnerName": null,
            "isSuspended": "false",
            "stacktrace": "java.base@11.0.5/java.net.PlainSocketImpl.accept0(Native Method)\njava.base@11.0.5/java.net.PlainSocketImpl.socketAccept(PlainSocketImpl.java:159)\njava.base@11.0.5/java.net.AbstractPlainSocketImpl.accept(AbstractPlainSocketImpl.java:458)\njava.base@11.0.5/java.net.ServerSocket.implAccept(ServerSocket.java:551)\njava.base@11.0.5/java.net.ServerSocket.accept(ServerSocket.java:519)\norg.apache.catalina.core.StandardServer.await(StandardServer.java:609)\norg.apache.catalina.startup.Catalina.await(Catalina.java:721)\norg.apache.catalina.startup.Catalina.start(Catalina.java:667)\njava.base@11.0.5/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\njava.base@11.0.5/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)\njava.base@11.0.5/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)\njava.base@11.0.5/java.lang.reflect.Method.invoke(Method.java:566)\napp//org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:343)\napp//org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:474)\n",
            "cpuTime": "16312.5",
            "userTime": "11515.625",
            "threadState": "RUNNABLE",
            "id": "1",
            "lockName": null,
            "threadName": "main",
            "isNative": "true"
        },
        {
            "isThreadCpuTimeSupported": "true",
            "getLockOwnerName": null,
            "isSuspended": "false",
            "stacktrace": "java.base@11.0.5/java.lang.ref.Reference.waitForReferencePendingList(Native Method)\njava.base@11.0.5/java.lang.ref.Reference.processPendingReferences(Reference.java:241)\njava.base@11.0.5/java.lang.ref.Reference$ReferenceHandler.run(Reference.java:213)\n",
            "cpuTime": "0.0",
            "userTime": "0.0",
            "threadState": "RUNNABLE",
            "id": "2",
            "lockName": null,
            "threadName": "Reference Handler",
            "isNative": "false"
        },
        {
            "isThreadCpuTimeSupported": "true",
            "getLockOwnerName": null,
            "isSuspended": "false",
            "stacktrace": "java.base@11.0.5/java.lang.Object.wait(Native Method)\njava.base@11.0.5/java.lang.ref.ReferenceQueue.remove(ReferenceQueue.java:155)\njava.base@11.0.5/java.lang.ref.ReferenceQueue.remove(ReferenceQueue.java:176)\njava.base@11.0.5/java.lang.ref.Finalizer$FinalizerThread.run(Finalizer.java:170)\n",
            "cpuTime": "0.0",
            "userTime": "0.0",
            "threadState": "WAITING",
            "id": "3",
            "lockName": "java.lang.ref.ReferenceQueue$Lock@4f01e5fa",
            "threadName": "Finalizer",
            "isNative": "false"
        }]
    }
  }
  ,
  methods: {
    copyThreadInfoToClipboard(id) {
      var copyText = document.getElementById(id).innerHTML;
      var input_temp = document.createElement('textarea');
      input_temp.innerHTML = copyText;
      document.body.appendChild(input_temp);
      input_temp.select();
      input_temp.setSelectionRange(0, 99999); /*For mobile devices*/
      document.execCommand('copy');
      alert(input_temp.value);
    },
  },
};
</script>

Answer 1

对于问题 #1，您可以使用：

//Copied from @hiws answer
//this will have the benefit of having a unique parent div 
//from which copy the entire content 

<div id="thread-id">
  <b-card-text v-for="...">
    <!-- Content to copy -->
  </b-card-text>
</div>

对于问题 #2：使用 innerText 而不是 innerHtml，这不会为您提供标记。

var copyText = document.getElementById(id).innerText;

Answer 2

你快到了。问题是您使用相同的 id 生成 3 divs。 document.getElementById(id) 只会检索第一个。而是将您的 v-for 包裹在另一个 div 中并将 id 放在该元素上。

<div id="thread-id">
  <b-card-text v-for="...">
    <!-- Content to copy -->
  </b-card-text>
</div>

如何在 Vue 中使用 v-for 将显示的全部数据复制到剪贴板

How to copy to clipboard entire data displayed using v-for in Vue

html

javascript

vue.js

bootstrap-vue

代码沙箱在这里：click