复制内容到剪切板

2024-05-21

解决方案

字数统计: 619 | 阅读时长≈ 2 分钟

在前端开发中，经常会遇到将内容复制到剪切板上的需求，复制文本，链接等。那么前端如何实现该功能呢？javascript中提供了两种API。

传统方法

早期实现复制到剪切板使用document.execCommand('copy')，实现方式如下：

创建textarea元素，把要复制的内容设置为它的值。
将元素设置为不可见，并插入到body元素中。
聚焦到该元素，并且选中所有内容。
执行document.execCommand('copy')命令，将内容复制到剪切板。移除textarea元素。

这种方法需要创建和移除textarea元素，需要设置元素不可见，代码相对复杂。在有些浏览器中，需要手动调用，否则无法复制成功。可以作为向后兼容来使用。

新方法

随着浏览器不断发展，现已经有来更简单直接的方式来实现复制内容到剪切板的方法Clipboard，实现方式如下：

检查浏览器是否支持navigator.clipboard.writeText()方法。
如果支持该方法，直接调用navigator.clipboard.writeText(text)，即可将text复制到剪切板。
如果不支持，则使用document.execCommand('copy')。

这种方法代码简洁，兼容性好，不需要依赖用户交互，可以在任何时候调用。

实例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>复制内容到剪切板</title>
  </head>
  <body>
    <button id="copy">复制</button>
    <script>
      function clipboardCopy(text) {
        const _text = String(text);
        if (navigator.clipboard && navigator.clipboard.writeText) {
          return navigator.clipboard.writeText(_text);
        } else {
          const textarea = document.createElement("textarea");
          textarea.style.position = "fixed";
          textarea.style.top = 0;
          textarea.style.left = 0;
          textarea.style.width = "1px";
          textarea.style.height = "1px";
          textarea.style.padding = 0;
          textarea.style.border = "none";
          textarea.style.outline = "none";
          textarea.style.boxShadow = "none";
          textarea.style.background = "transparent";
          textarea.value = text;
          document.body.appendChild(textarea);
          textarea.focus();
          textarea.select();
          try {
            // 浏览器会限制网页直接访问剪切板，需要用户交互
            const successful = document.execCommand("copy");
            if (successful) {
              return Promise.resolve(text);
            } else {
              return Promise.reject("复制失败");
            }
          } catch (e) {
            document.body.removeChild(textarea);
            return Promise.reject(e);
          }
        }
      }

      const copy = document.getElementById("copy");
      // 如果浏览器不支持navigator.clipboard，则需要手动调用
      copy.onclick = function () {
        clipboardCopy("复制内容到剪切板").then((res) => {
          console.log(res);
        });
      };
    </script>
  </body>
</html>