Async Clipboard API：ClipboardItem 图片与富文本复制

---

title: Async Clipboard API：ClipboardItem 图片与富文本复制

keywords:

• ClipboardItem
• navigator.clipboard
• image/png
• text/html
• 权限

description: 介绍异步剪贴板的高级用法，使用 ClipboardItem 复制图片与富文本，权限与用户手势要求、兼容回退方案与安全治理。

categories:

• 应用软件
• 系统工具

---

概述

Async Clipboard API 除文本外支持图片与富文本复制，通过 ClipboardItem 指定类型与数据源。需在用户手势下调用并在安全上下文使用，注意权限与隐私边界。

示例

// 复制图片
const pngBlob = await (await fetch('/img/logo.png')).blob()
await navigator.clipboard.write([new ClipboardItem({ 'image/png': pngBlob })])
// 复制富文本
const html = new Blob(["<b>加粗</b>"], { 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/