js实现拷贝

实现文本拷贝

使用 document.execCommand 方法（已废弃但兼容性较好）：

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

使用 Clipboard API

现代浏览器推荐使用 Clipboard API：

async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('Text copied to clipboard');
  } catch (err) {
    console.error('Failed to copy text: ', err);
  }
}

复制HTML内容

通过 Clipboard API 复制富文本：

async function copyHTML(html) {
  const blob = new Blob([html], { type: 'text/html' });
  const clipboardItem = new ClipboardItem({ 'text/html': blob });

  try {
    await navigator.clipboard.write([clipboardItem]);
  } catch (err) {
    console.error('Failed to copy HTML: ', err);
  }
}

复制图片到剪贴板

使用 Canvas 和 Clipboard API：

async function copyImage(imgElement) {
  const canvas = document.createElement('canvas');
  canvas.width = imgElement.width;
  canvas.height = imgElement.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(imgElement, 0, 0);

  canvas.toBlob(async (blob) => {
    try {
      await navigator.clipboard.write([
        new ClipboardItem({ 'image/png': blob })
      ]);
    } catch (err) {
      console.error('Failed to copy image: ', err);
    }
  }, 'image/png');
}

处理权限问题

某些浏览器需要用户手势触发：

document.getElementById('copyBtn').addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('要复制的文本');
  } catch (err) {
    console.error('需要用户交互才能访问剪贴板');
  }
});

兼容性处理

检测浏览器支持情况：

function canUseClipboardAPI() {
  return !!navigator.clipboard && typeof ClipboardItem !== 'undefined';
}

function canUseExecCommand() {
  return !!document.execCommand;
}

function copyWithFallback(text) {
  if (canUseClipboardAPI()) {
    navigator.clipboard.writeText(text);
  } else if (canUseExecCommand()) {
    copyText(text); // 使用第一个方法的实现
  } else {
    alert('您的浏览器不支持复制功能');
  }
}