js 实现剪切板

实现剪切板功能的方法

在JavaScript中，实现剪切板功能可以通过多种方式完成。以下是几种常见的实现方法：

使用Clipboard API

现代浏览器支持Clipboard API，提供了更简单和安全的方式来访问剪切板：

navigator.clipboard.writeText('要复制的文本')
  .then(() => {
    console.log('文本已复制到剪切板');
  })
  .catch(err => {
    console.error('无法复制文本: ', err);
  });

读取剪切板内容：

navigator.clipboard.readText()
  .then(text => {
    console.log('剪切板内容: ', text);
  })
  .catch(err => {
    console.error('无法读取剪切板: ', err);
  });

使用document.execCommand方法

虽然已废弃，但仍有广泛支持：

function copyToClipboard(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

使用异步Clipboard API写入图片

async function copyImageToClipboard(blob) {
  try {
    await navigator.clipboard.write([
      new ClipboardItem({
        'image/png': blob
      })
    ]);
    console.log('图片已复制到剪切板');
  } catch (err) {
    console.error('无法复制图片: ', err);
  }
}

注意事项

• 出于安全考虑，浏览器限制了对剪切板的访问
• 某些操作需要用户明确授权
• 不同浏览器可能有不同的实现和限制
• 移动设备上的支持可能有所不同

兼容性处理

function copyTextToClipboard(text) {
  if (navigator.clipboard) {
    return navigator.clipboard.writeText(text);
  } else {
    // 回退到execCommand方法
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    try {
      const successful = document.execCommand('copy');
      document.body.removeChild(textarea);
      return successful ? Promise.resolve() : Promise.reject();
    } catch (err) {
      document.body.removeChild(textarea);
      return Promise.reject(err);
    }
  }
}

权限检查

navigator.permissions.query({name: 'clipboard-write'})
  .then(result => {
    if (result.state === 'granted' || result.state === 'prompt') {
      // 可以尝试写入剪切板
    }
  });

以上方法提供了在不同环境下实现剪切板功能的方式，可以根据具体需求选择最适合的实现方案。