JavaScript中的全新异步剪贴板 navigator.clipboard

使用navigator.clipboard API 让Web应用中的复制粘贴变得更简单。以前，我们依赖 document.execCommand("copy") 来处理剪贴板操作。这种方法是同步的且功能有限——它只能从选中的 DOM 元素中复制文本。此外，它在不同浏览器上的兼容性也不一致。虽然document.execCommand已被废弃，但仍然可以作为旧版浏览器的回退方案。

document.execCommand

回顾一下document.execCommand("copy") 的用法：

• 将选中的文本复制到剪贴板

const textArea = document.createElement('textarea');
textArea.value = 'Hello World!';
document.body.appendChild(textArea);
textArea.select();
try {
  document.execCommand('copy');
  console.log('Text copied!');
} finally {
  document.body.removeChild(textArea);
}

navigator.clipboard

使用navigator.clipboard API 通过提供异步方法可以解决 document.execCommand兼容性等问题，并支持各种数据类型。这项功能更安全，因为浏览器在允许剪贴板访问之前需要明确的用户授权。我们可以通过以下示例了解navigator.clipboard 的用法：

• 复制文本navigator.clipboard.writeText()，实现文档中的“复制到剪贴板”功能

try {
  await navigator.clipboard.writeText('Hello from clipboard!');
  console.log('文本已复制');
} catch (err) {
  console.error('复制失败:', err);
}

• 读取文本navigator.clipboard.readText()为表单或编辑器提供“粘贴”选项

try {
  const text = await navigator.clipboard.readText();
  console.log('粘贴的内容:', text);
} catch (err) {
  console.error('粘贴失败:', err);
}

• 复制复杂数据（如图像或文件），使用ClipboardItem辅助类 将复杂数据（如图像或文件）写入剪贴板。

try {
//ClipboardItem[]（数组，每个 ClipboardItem 表示一种 MIME 类型的数据）
  const imageBlob = new Blob(['<image data>'], { type: 'image/png' });
  const item = new ClipboardItem({
    'image/png': imageBlob,
  });
  await navigator.clipboard.write([item]);
} catch (err) {
  console.error('复制图像失败:', err);
}

• 从剪贴板读取多种数据类型,navigator.clipboard.read()

从剪贴板读取多种数据类型，返回Promise<DataTransfer>（包含一个或多个 ClipboardItem）,如下面的代码：

const items = await navigator.clipboard.read();
for (const item of items) {
  const types = item.types;
  console.log('Available types:', types);
}

• 浏览器支持和兼容性

尽管剪贴板 API 的支持度很强，但仍然为旧浏览器提供回退方案，如下面的例子：

if (navigator.clipboard) {
  // 使用新的剪贴板 API
} else {
  // 回退到旧的 execCommand 方法
  const textArea = document.createElement('textarea');
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.select();
  try {
    document.execCommand('copy');
  } finally {
    document.body.removeChild(textArea);
  }
}

常见注意事项

注意：在大多数浏览器中，剪贴板操作需要用户授权，并且需要在 HTTPS 环境下进行。错误处理非常重要，因为如果权限被拒绝或运行在受限环境中，操作可能会失败。

1. 权限需求

新 API 通常需要用户明确授权才能访问剪贴板内容：

const permission = await navigator.permissions.query({ name: 'clipboard-read' });
if (permission.state === 'granted') {
  console.log('Clipboard access granted');
} else {
  console.log('Clipboard access denied');
}

2. HTTPS 环境要求

navigator.clipboard 必须在 HTTPS 或安全上下文（如 localhost）中运行。

3. 数据隐私

浏览器对剪贴板数据有严格的访问限制，用户需要明确授权。

4. 错误处理

剪贴板操作可能失败的原因：

• 权限被拒绝：用户未授予剪贴板访问权限。
• 数据格式不支持：尝试写入不支持的 MIME 类型。
• 环境限制：非 HTTPS 页面。

建议添加错误处理：

try {
   console.log('复制成功');
} catch (err) {
   console.error('复制失败:', err);
}