我使用显示线程转储信息的卡片显示页面。线程转储信息使用 v-for 显示，问题是当我复制时，它只使用我当前的 copyThreadInfoToClipboard 方法复制单个数据循环。 所以，我的要求是，
- 如何复制整个数据循环？
- 如何转义复制的选择文本中的子元素标签，如本例中所示
<span>和<pre>标签。我不希望我复制的文本包含<!----><!----><code data-v-ea65a43e="">，我可以在每个单独的元素上放置 id 并尝试复制，但有没有办法我们可以使用单个 id 复制，该 id 可能是父级并跳过/删除复制文本中的子元素标签，但它应该包含子元素内部文本， 我只是希望我复制的文本不包含太阳元素 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>
对于问题 #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;
你快到了。 问题是您正在使用相同的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>