概述 Async Clipboard API 除文本外支持图片与富文本复制,通过 `ClipboardItem` 指定类型与数据源。需在用户手势下调用并在安全上下文使用,注意权限与隐私边界。 示例 ```js // 复制图片 const pngBlob = await (await fetch('/img/logo.png')).blob() await navigator.clipboard.write([new ClipboardItem({ 'image/png': pngBlob })]) // 复制富文本 const html = new Blob(["加粗"], { type: 'text/html' }) const text = new Blob(["加粗"], { type: 'text/plain' }) await navigator.clipboard.write([new ClipboardItem({ 'text/html': html, 'text/plain': text })]) ``` 工程建议 - 权限与手势:在点击等手势后调用;处理拒绝与错误;提供回退提示。 - 安全与类型:限制来源与内容;对 HTML 进行清理与可信处理。 - 兼容:不支持时回退到 `execCommand('copy')` 或输入选择复制。 参考与验证 - MDN Clipboard API 文档:https://developer.mozilla.org/docs/Web/API/Clipboard_API - Chrome 平台文档:https://developer.chrome.com/docs/web-platform/async-clipboard/

发表评论 取消回复