当前位置：首页 > news >正文

使用浏览器的Clipboard API实现前端复制copy功能

news 2025/7/13 5:34:16

在前端开发中，复制文本到剪贴板的功能通常使用浏览器的 Clipboard API 实现。比如 navigator.clipboard.writeText 方法。以下是一个简单的案例，展示如何使用 Clipboard API 实现复制文本的功能。

基本用法

首先，你需要创建一个按钮，当用户点击该按钮时，将指定的文本通过navigator.clipboard.writeText复制到剪贴板。

<template><div><h1>案例</h1><p ref="textToCopy">要复制的内容</p><button @click="copyText">Copy Text</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const textToCopy = ref(null);const copyText = async () => {const text = textToCopy.value.textContent;try {await navigator.clipboard.writeText(text);console.log("复制成功");// $message弹出复制成功的提示} catch (err) {console.error("复制失败：", err);// $message弹出复制失败的提示}};return {textToCopy,copyText};}
}
</script><style scoped>
button {padding: 10px 15px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;
}
button:hover {background-color: #45a049;
}
</style>

代码说明

navigator.clipboard.writeText：这是现代浏览器提供的异步 API，用于将文本写入剪贴板。它是异步的，因此需要使用 async/await。

用户提示：如果用户的浏览器不支持 Clipboard API 或复制失败，会抛出错误，因此需要用 try...catch 捕获异常。使用 Element Plus 的 $message 提示用户复制成功或失败。

兼容性解决方案

（1）如果需要兼容不支持 Clipboard API 的浏览器，可以使用以下代码：

<script>
import { getCurrentInstance } from 'vue';export default {setup() {const instance = getCurrentInstance();const copyToClipboardFallback = (text) => {const textarea = document.createElement('textarea');textarea.value = text;document.body.appendChild(textarea);textarea.select();try {document.execCommand('copy');instance.proxy.$message.success("复制成功！");} catch (err) {instance.proxy.$message.error("复制失败，请手动复制！");}document.body.removeChild(textarea);};return {copyToClipboardFallback};}
}
</script>

copyToClipboardFallback 函数：

该函数接受一个 text 参数，表示要复制的文本。

创建一个 <textarea> 元素，并将其值设置为传入的文本。

将 <textarea> 元素添加到文档的 <body> 中，并选中其中的文本。

使用 document.execCommand('copy') 尝试复制选中的文本。

使用 try...catch 块来处理可能的错误，并通过 instance.proxy.$message 显示成功或失败的消息。

最后，从文档中移除 <textarea> 元素。

（2）在copyText方法中，可以添加对 navigator.clipboard 的检查，以决定使用哪种方式：

if (navigator.clipboard && window.isSecureContext) {navigator.clipboard.writeText(text).then(() => {console.log("复制成功！");}).catch(err => {console.error("复制失败：", err);});} else {copyToClipboardFallback(text);}