通过原生js实现复制文本到剪贴板

使用document.execCommand实现

使用document.execCommand实现功能，需要借助input元素实现复制文本到剪贴板。

代码如下

<button id="button">按钮</button>
<script>
    var div = document.getElementById('div');
    var button = document.getElementById('button');
    button.addEventListener('click', () => {
        var input = document.createElement('input');
        document.body.appendChild(input);
        input.value = div.innerHTML;
        input.select(); // 选择对象
        document.execCommand('Copy'); // 执行浏览器复制命令
        input.style.display = 'none';
    })
</script>

使用Clipboard API实现

Clipboard API 可以用来复制任意文本

<div id="div">复制的文本</div>
<button id="button">按钮</button>
<script>
    function createClipboard () {
        // 对复制的文本进行过滤，去除其中的HTML标签
        function strip (html) {
            var doc = new DOMParser().parseFromString(html, 'text/html');
            return doc.body.textContent || "";
        }

        function copyText (text, callback) {
            navigator.clipboard.writeText(strip(text))
                .then(() => callback())
                .catch(err => { throw err });
        }

        const clipboard = {
            copyText
        }

        return clipboard;
    }


    document.getElementById("button").addEventListener("click", () => {
        const clipboard = createClipboard();
        clipboard.copyText("<span>复制的文本", () => {
            alert("复制成功");
        });
    })
</script>

总结

Clipboard API 和 document.execCommand 都是用来处理网页上的复制、粘贴等剪贴板操作，但它们的使用和兼容性有所不同：

1. Clipboard API：

   • 这是现代浏览器提供的一个原生API，允许开发者更直接地读取和写入剪贴板内容。
   • 支持读取和写入文本，也支持图像和其他类型数据（需要Blob对象）。
   • 由于涉及用户隐私和安全，该API在调用时需要在用户交互上下文中（如点击事件回调函数中）才能正常工作，并且可能需要额外的安全权限。

2. document.execCommand：

   • 这是一个较旧的方法，已经被部分浏览器弃用，但仍有一些场景下可用。
   • 提供了一系列命令，包括"copy"、"cut"和"paste"等与剪贴板相关的操作。
   • 由于其安全性问题以及对富文本格式的支持不理想，许多现代浏览器推荐使用新的Clipboard API替代。

总的来说，对于新项目和需要兼容现代浏览器的应用，建议使用Clipboard API进行剪贴板操作。而对于仍需兼容旧版浏览器的情况，可能还需要结合使用document.execCommand。