"Clipboard API 文件与二进制数据读写实践"

Clipboard API 文件与二进制数据读写实践概述Clipboard API 支持在安全上下文中访问系统剪贴板，读写文本与任意 Blob 数据。结合权限与用户激活要求，可实现图片复制、富文本粘贴等高级交互。技术背景入口：`navigator.clipboard`；对象：`ClipboardItem`；方法：`read()`/`write()`/`readText()`/`writeText()`。写入图片需构造 `ClipboardItem({ [blob.type]: blob })`。核心内容写入 PNG 示例async function writeClipImg() { const resp = await fetch('/img.png'); const blob = await resp.blob(); await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]); } 读取任意条目const items = await navigator.clipboard.read(); for (const item of items) { for (const type of item.types) { const blob = await item.getType(type); } } 技术参数与验证测试环境浏览器：Chrome/Edge（权限可持久化）；Firefox/Safari（用户激活/提示差异）验证要点权限与激活要求；MIME 支持与降级为文本。注意事项仅安全上下文；跨 iframe 权限策略需配置。检查 `ClipboardItem.supports(type)` 并提供友好降级。参考资料MDN（Clipboard API）：https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_APIMDN（ClipboardItem 构造）：https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem/ClipboardItemMDN（Clipboard.write）：https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write