【JavaScript】复制文本到剪切板

一、Clipboard API

Clipboard API是现代浏览器提供的一组JavaScript接口，用于访问和操作用户剪贴板中的内容。它提供了异步读取和写入剪贴板的功能，可以处理多种类型的数据，如文本、图像等。通过使用navigator.clipboard对象，开发者可以调用相关方法来读取和写入剪贴板中的内容。

相关属性方法

属性：

• clipboardData：表示剪贴板中的数据对象。
• types：返回剪贴板中数据的类型列表。

方法：

• readText()：异步读取剪贴板中的文本内容。
• writeText(text)：异步将文本内容写入剪贴板。
• read()：异步读取剪贴板中的数据对象。
• write(data)：异步将自定义数据对象写入剪贴板。

示例

constcopyText= () => {
consttext="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')等命令，可以实现对剪贴板内容进行读取或写入。

constcopyText= () => {
consttext="Hello, Clipboard!"consttextarea=document.createElement('textarea')
textarea.value=texttextarea.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

1. 检测浏览器是否支持navigator.clipboard：

constisClipboardSupported= () => {
return!!navigator.clipboard&&typeofnavigator.clipboard.writeText==='function';
};

2. 创建一个名为fallbackCopyText的函数，用于在不支持Clipboard API的浏览器中实现复制功能：

constfallbackCopyText= (text) => {
consttextarea=document.createElement('textarea')
textarea.value=texttextarea.style.position='absolute'textarea.style.opacity='0'document.body.appendChild(textarea)
textarea.select()
document.execCommand('copy')
textarea.remove()
};

3. 在自定义hooks中，根据浏览器是否支持Clipboard API来选择使用哪种复制方式：

constuseClipboard= () => {
constcopied=ref(false);
constcopyText= (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()来实现复制功能。