JS跨浏览器复制文本到剪贴板和从剪贴板获取文本的实现

本文链接：https://blog.youkuaiyun.com/qq_42214739/article/details/146267024

跨浏览器复制文本到剪贴板和从剪贴板获取文本的实现

在现代 Web 开发中，复制文本到剪贴板和从剪贴板获取文本是常见的需求。然而，由于浏览器的兼容性问题，实现这一功能需要兼顾现代 API 和传统方法。本文将介绍如何使用 JavaScript 实现跨浏览器的复制和粘贴功能。

1. 复制文本到剪贴板

1.1 使用 Clipboard API（现代方法）

Clipboard API 是现代浏览器推荐的方式，它提供了简单且强大的剪贴板操作功能。

function copyToClipboard(text) {
  if (navigator.clipboard) {
    return navigator.clipboard.writeText(text)
      .then(() => {
        console.log('文本已成功复制到剪贴板');
      })
      .catch(err => {
        console.error('使用Clipboard API复制失败:', err);
        throw err; // 抛出错误以便进一步处理
      });
  } else {
    console.warn('当前浏览器不支持Clipboard API，尝试备用方法');
    return copyViaExecCommand(text); // 回退到传统方法
  }
}

1.2 使用 `document.execCommand`（传统方法）

对于不支持 Clipboard API 的浏览器，可以使用 document.execCommand('copy') 方法。

function copyViaExecCommand(text) {
  return new Promise((resolve, reject) => {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed'; // 避免闪现
    textarea.style.opacity = '0';     // 避免闪现
    document.body.appendChild(textarea);
    textarea.select();

    try {
      const successful = document.execCommand('copy');
      if (successful) {
        resolve();
        console.log('文本已成功复制到剪贴板');
      } else {
        reject(new Error('execCommand("copy") 失败'));
      }
    } catch (err) {
      reject(err);
    } finally {
      document.body.removeChild(textarea); // 清理DOM
    }
  });
}

1.3 使用方法

copyToClipboard('要复制的文本')
  .then(() => {
    console.log('复制成功');
  })
  .catch(err => {
    console.error('复制失败:', err);
  });

2. 从剪贴板获取文本

2.1 使用 Clipboard API（现代方法）

Clipboard API 也支持从剪贴板读取文本。

function getTextFromClipboard() {
  if (navigator.clipboard) {
    return navigator.clipboard.readText()
      .then(text => {
        console.log('从剪贴板获取的文本:', text);
        return text;
      })
      .catch(err => {
        console.error('使用Clipboard API读取失败:', err);
        throw err; // 抛出错误以便进一步处理
      });
  } else {
    console.warn('当前浏览器不支持Clipboard API，无法从剪贴板读取文本');
    return Promise.reject(new Error('当前浏览器不支持Clipboard API'));
  }
}

2.2 传统方法的限制

从剪贴板读取文本的传统方法（如 document.execCommand('paste')）在现代浏览器中已被禁用，因为它存在安全隐患。因此，Clipboard API 是唯一可靠的方式。

3. 兼容性说明

Clipboard API:
- 支持大多数现代浏览器（Chrome、Firefox、Edge、Safari 13.1+）。
- 需要 HTTPS 环境，或者在 localhost 和 127.0.0.1 上运行。
- 需要用户授权（浏览器会自动弹出权限请求）。
document.execCommand:
- 已被弃用，但在一些旧版浏览器中仍然可用。
- 仅适用于复制操作，无法用于读取剪贴板内容。

4. 完整示例

以下是一个完整的示例，包含复制和读取剪贴板文本的功能：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>剪贴板操作示例</title>
</head>
<body>
  <h1>剪贴板操作示例</h1>
  <textarea id="input" placeholder="输入要复制的文本"></textarea>
  <button id="copyBtn">复制到剪贴板</button>
  <button id="pasteBtn">从剪贴板获取文本</button>
  <p id="output"></p>

  <script>
    // 复制文本到剪贴板
    document.getElementById('copyBtn').addEventListener('click', () => {
      const text = document.getElementById('input').value;
      copyToClipboard(text)
        .then(() => {
          alert('复制成功！');
        })
        .catch(err => {
          alert('复制失败: ' + err.message);
        });
    });

    // 从剪贴板获取文本
    document.getElementById('pasteBtn').addEventListener('click', () => {
      getTextFromClipboard()
        .then(text => {
          document.getElementById('output').textContent = '从剪贴板获取的文本: ' + text;
        })
        .catch(err => {
          alert('读取失败: ' + err.message);
        });
    });

    // 复制功能的实现
    function copyToClipboard(text) {
      if (navigator.clipboard) {
        return navigator.clipboard.writeText(text);
      } else {
        return copyViaExecCommand(text);
      }
    }

    function copyViaExecCommand(text) {
      return new Promise((resolve, reject) => {
        const textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        document.body.appendChild(textarea);
        textarea.select();

        try {
          const successful = document.execCommand('copy');
          if (successful) {
            resolve();
          } else {
            reject(new Error('execCommand("copy") 失败'));
          }
        } catch (err) {
          reject(err);
        } finally {
          document.body.removeChild(textarea);
        }
      });
    }

    // 读取剪贴板文本的实现
    function getTextFromClipboard() {
      if (navigator.clipboard) {
        return navigator.clipboard.readText();
      } else {
        return Promise.reject(new Error('当前浏览器不支持Clipboard API'));
      }
    }
  </script>
</body>
</html>