js实现复制到剪贴板
实现复制到剪贴板的几种方法
使用 Clipboard API（现代浏览器推荐）
现代浏览器支持 navigator.clipboard.writeText API，代码简洁且安全：
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log('内容已复制到剪贴板');
} catch (err) {
console.error('复制失败:', err);
}
}注意：此API需要HTTPS环境或在localhost下工作，可能需用户授权。
兼容旧浏览器的 document.execCommand 方法
虽然已废弃，但兼容性更广：
function copyToClipboardFallback(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed';
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand('copy');
console.log('复制成功');
} catch (err) {
console.error('复制失败:', err);
} finally {
document.body.removeChild(textarea);
}
}使用第三方库
若需要更复杂功能（如富文本复制），可考虑以下库：
- clipboard.js：轻量级解决方案
- copy-text-to-clipboard：极简实现
特殊场景处理
复制非文本内容（如HTML）时：
function copyHtmlToClipboard(html) {
const blob = new Blob([html], { type: 'text/html' });
const clipboardItem = new ClipboardItem({ 'text/html': blob });
navigator.clipboard.write([clipboardItem]);
}注意事项
- 移动端设备可能需要用户手势触发（如click事件）
- 部分浏览器可能限制自动复制操作以防止滥用
- 始终提供错误处理以应对权限拒绝等情况
