js实现word复制

使用 Clipboard API 实现复制

Clipboard API 是现代浏览器提供的原生 API，允许访问系统剪贴板。通过 navigator.clipboard.writeText() 方法可以直接将文本复制到剪贴板。

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('文本已复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

调用方式：

copyToClipboard('需要复制的文本内容');

使用 document.execCommand 方法（兼容旧版浏览器）

对于不支持 Clipboard API 的旧版浏览器，可以使用 document.execCommand('copy') 方法。需要先创建一个临时的文本区域元素。

function copyTextToClipboard(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();

  try {
    const successful = document.execCommand('copy');
    const msg = successful ? '成功' : '失败';
    console.log('复制' + msg);
  } catch (err) {
    console.error('复制失败:', err);
  }

  document.body.removeChild(textarea);
}

复制富文本内容（HTML 格式）

如果需要复制带格式的富文本内容，可以使用 Clipboard API 的 write() 方法。

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

  try {
    await navigator.clipboard.write([clipboardItem]);
    console.log('富文本复制成功');
  } catch (err) {
    console.error('富文本复制失败:', err);
  }
}

检测剪贴板权限

某些浏览器可能需要用户授权才能访问剪贴板。可以通过以下代码检查权限状态：

async function checkClipboardPermission() {
  const permissionStatus = await navigator.permissions.query({
    name: 'clipboard-write'
  });

  if (permissionStatus.state === 'granted') {
    console.log('有剪贴板写入权限');
  } else {
    console.log('无剪贴板写入权限');
  }
}

处理复制事件

可以监听元素的复制事件，自定义复制内容：

document.addEventListener('copy', (e) => {
  e.preventDefault();
  e.clipboardData.setData('text/plain', '自定义复制内容');
  console.log('自定义内容已复制');
});

注意事项

Clipboard API 需要安全上下文（HTTPS 或 localhost） 某些浏览器可能限制剪贴板访问，需要用户交互触发 移动设备上的剪贴板行为可能与桌面端不同 execCommand 方法已逐渐被废弃，建议优先使用 Clipboard API