报错情况

js
// 报错信息：Cannot read properties of undefined (reading 'writeText')
navigator.clipboard.writeText(txt)

报错原因

浏览器禁用了非安全域的 navigator.clipboard 对象，http属于非安全域，在 http 环境下调用会出现报错

安全域包括

• 本地访问, 如 127.0.0.1 或 localhost
• 开启TLS安全认证的地址，如 https 协议的地址

解决方法

使用第三方库

shell
# 安装第三方库
npm install copy-to-clipboard

js
// 使用第三方库
import copy from 'copy-to-clipboard';

// 复制到剪切板
copy(value)

手写代码

js
function copyToClipboard(textToCopy) {
    // navigator clipboard 需要https等安全上下文
    if (navigator.clipboard && window.isSecureContext) {
        // navigator clipboard 向剪贴板写文本
        return navigator.clipboard.writeText(textToCopy);
    } else {
        // 创建text area
        let textArea = document.createElement("textarea");
        textArea.value = textToCopy;
        // 使text area不在viewport，同时设置不可见
        textArea.style.position = "absolute";
        textArea.style.opacity = 0;
        textArea.style.left = "-999999px";
        textArea.style.top = "-999999px";
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        return new Promise((res, rej) => {
            // 执行复制命令并移除文本框
            document.execCommand('copy') ? res() : rej();
            textArea.remove();
        });
    }
}