navigator.clipboard 是现代浏览器唯一可行的剪贴板 API；复制须用户手势触发并 try/catch 异常，粘贴推荐监听 paste 事件而非 readText()；富文本和图片支持差，应优先使用纯文本方案并做好降级。
浏览器里直接读写剪贴板，navigator.clipboard 是唯一现代可行方案；document.execCommand('copy') 已废弃，且在多数现代上下文（如非用户手势触发、iframe 无权限）下彻底失效。
复制文本：必须由用户手势触发，且需处理权限与异常
点击按钮复制一段文字，不能靠定时器或 onload 自动执行——浏览器强制要求操作来自 click、keydown 等可信事件。否则会抛出 "NotAllowedError"。
实操建议：
- 绑定到
button的click事件，不要用setTimeout延迟调用 - 调用前可先检查权限：
navigator.permissions.query({name: 'clipboard-write'})，但非必需；更务实的做法是直接try/catch - 复制字符串用
navigator.clipboard.writeText('hello')，返回 Promise，记得.catch(e => console.error(e)) - 若传入非字符串（如对象），会静默转成
[object Object]，务必String()或JSON.stringify()显式转换
粘贴文本：监听 paste 事件比轮询 readText() 更可靠
navigator.clipboard.readText() 需要 clipboard-read 权限，且仅在安全上下文（HTTPS 或 localhost）中可用；而 paste 事件天然受用户授权约束，兼容性更好，也更符合真实交互逻辑。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
实操建议：
- 在输入框或内容区监听
paste事件：element.addEventListener('paste', handlePaste) - 在
handlePaste中调用event.preventDefault()可阻止默认粘贴行为，再用event.clipboardData.getData('text/plain')拿原始内容 - 不要依赖
navigator.clipboard.readText()实现“点击按钮读取剪贴板”——多数浏览器会拒绝，尤其在非主动手势后 - 注意：Safari 直到 v16.4 才支持
clipboardData.getData()，旧版需降级用event.clipboardData?.getData('text/html')或 fallback 到document.execCommand（仅限已激活的 input/textarea）
读写富文本或图片？write() 和 read() 支持 ClipboardItem，但兼容性差
想复制带样式的 HTML 片段或截图，得用 navigator.clipboard.write([new ClipboardItem({...})])。但这套 API 在 Chrome 76+ 有限支持，Firefox 仍不支持 ClipboardItem 构造，Safari 基本不可用。
实操建议：
- 纯文本场景一律用
writeText()/paste事件，别为富文本过早引入复杂逻辑 - 若真需 HTML 内容，优先尝试
clipboardData.setData('text/html', htmlStr)（仅限beforeinput或paste事件中），比ClipboardItem兼容得多 - 复制图片需构造
Blob并传入ClipboardItem，但 iOS Safari 和 Firefox 完全不认，生产环境慎用 - 服务端生成的 base64 图片，不要试图用
writeText()复制——它只会粘成一串字符，不是可渲染图像
真正难的不是调用哪个 API，而是判断当前上下文是否具备权限、用户是否真的触发了交互、以及降级路径是否自然。很多“复制失败”问题，根源不在代码，而在没等用户 click 就提前调用了 writeText()，或者把 paste 事件绑在了不可编辑的 div 上。
