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

Question

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

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

代码沙箱在这里：点击

    <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

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

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