一、Clipboard API
在现代 Web 开发中，复制文本到剪切板是一个常见的需求，特别是在一些社交分享、复制链接等场景下。通过 JavaScript，我们可以轻松实现这一功能。
Clipboard API 是现代浏览器提供的一组 JavaScript 接口，用于访问和操作用户剪贴板中的内容。它提供了异步读取和写入剪贴板的功能，可以处理多种类型的数据，如文本、图像等。通过使用navigator.clipboard对象，开发者可以调用相关方法来读取和写入剪贴板中的内容。
相关属性方法
属性：
-
clipboardData：表示剪贴板中的数据对象。
-
types：返回剪贴板中数据的类型列表。
方法：
-
readText()：异步读取剪贴板中的文本内容。
-
writeText(text)：异步将文本内容写入剪贴板。
-
read()：异步读取剪贴板中的数据对象。
-
write(data)：异步将自定义数据对象写入剪贴板。
示例
const copyText = () => {
const text = "Hello, Clipboard API!";
navigator.clipboard
.writeText(text)
.then(() => {
console.log("Text copied to clipboard");
})
.catch((error) => {
console.error("Failed to copy text: ", error);
});
};
二、document.execCommand
document.execCommand()是一个旧的浏览器 API，用于执行命令并影响浏览器行为。其中包括一些与剪贴板相关的命令，如复制、粘贴等。
通过调用document.execCommand('copy')或document.execCommand('paste')等命令，可以实现对剪贴板内容进行读取或写入。
const copyText = () => {
const text = "Hello, Clipboard!";
const textarea = document.createElement("textarea");
textarea.value = text;
textarea.style.position = "absolute";
textarea.style.opacity = "0";
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
};
优点：
-
使用简单，无需额外引入 API。
-
兼容性好。
如下图所示的浏览器兼容性
缺点：
-
功能相对有限，只能处理文本类型的数据。
-
不支持异步操作。
-
安全性和用户隐私保护较差。
需要注意的是，document.execCommand()在现代浏览器中已经被废弃，不再推荐使用。而 Clipboard API 是未来发展的趋势，提供了更好的功能和安全性。
因此，在支持 Clipboard API 的浏览器中，建议使用 Clipboard API 来进行剪贴板操作。对于不支持 Clipboard API 的浏览器，可以使用document.execCommand()作为降级方案。
三、useClipboard
-
检测浏览器是否支持
navigator.clipboard：
const isClipboardSupported = () => {
return (
!!navigator.clipboard && typeof navigator.clipboard.writeText === "function"
);
};
-
创建一个名为
fallbackCopyText的函数，用于在不支持 Clipboard API 的浏览器中实现复制功能：
const fallbackCopyText = (text) => {
const textarea = document.createElement("textarea");
textarea.value = text;
textarea.style.position = "absolute";
textarea.style.opacity = "0";
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
textarea.remove();
};
-
在自定义 hooks 中，根据浏览器是否支持 Clipboard API 来选择使用哪种复制方式：
const useClipboard = () => {
const copied = ref(false);
const copyText = (text) => {
if (isClipboardSupported()) {
navigator.clipboard
.writeText(text)
.then(() => {
copied.value = true;
})
.catch((error) => {
console.error("Failed to copy text: ", error);
});
} else {
fallbackCopyText(text);
copied.value = true;
}
};
return { copied, copyText };
};
通过以上降级方案，我们首先检测浏览器是否支持navigator.clipboard。如果支持，则使用navigator.clipboard.writeText()来复制文本。如果不支持，则调用fallbackCopyText()函数来实现复制功能。
在使用自定义 hooks 的 Vue 组件中，无需更改任何代码，因为自定义 hooks 已经处理了浏览器兼容性问题。无论浏览器是否支持 Clipboard API，都可以正常使用复制功能。
降级方案中的fallbackCopyText()函数使用了document.execCommand('copy')来执行复制操作。这是一种旧的方式，在现代浏览器中仍然有效，但并不推荐使用。因此，在支持 Clipboard API 的浏览器中，尽量优先使用navigator.clipboard.writeText()来实现复制功能。
总结
在文章中，我们首先介绍了复制文本到剪切板的两种方法：使用 document.execCommand 方法和使用 Clipboard API。对于 execCommand 方法，我们详细介绍了其使用步骤和注意事项，并提供了一个示例代码。对于 Clipboard API，我们介绍了其基本概念和使用方法，同时也提到了浏览器兼容性的问题。
然后，我们对比了这两种方法的优缺点。execCommand 方法虽然简单易用，但是在某些浏览器中可能存在兼容性问题。而 Clipboard API 虽然相对复杂一些，但是它是浏览器原生支持的 API，并且具有更好的扩展性和安全性。
