不能直接读取富文本或图片二进制数据，navigator.clipboard.read()仅能读取指定MIME类型的Blob，但支持极有限：仅Chromium稳定支持图片（image/png等），text/html常被忽略或降级为纯文本；需用户手势触发、HTTPS环境，且Firefox、Safari不支持read()。
Async Clipboard API 能否读取富文本和图片
不能直接读取富文本（如带样式的 HTML）或图片二进制数据，navigator.clipboard.read() 只能读取 text/html、text/plain、image/png 等 MIME 类型的 Blob，但浏览器实际支持非常有限——目前仅 Chromium 内核（Chrome/Edge 85+、Opera）支持 read() 读取图片，且必须满足安全上下文 + 用户手势触发；text/html 类型在绝大多数情况下会被忽略或降级为纯文本。
读取剪贴板图片的实际可行路径
真正能稳定落地的方式是：用 navigator.clipboard.read() 获取 Blob，再手动判断类型并转换。但要注意，read() 返回的是 ClipboardItem 数组，每个 item 可能含多个类型，需主动遍历检查。
- 必须在用户点击、按键等**同步事件回调中调用**，否则抛出
NotAllowedError - 只支持
image/png、image/jpeg、image/gif（部分版本），image/webp不稳定 - 拿到
Blob后用URL.createObjectURL()生成临时 URL 才能显示，不能直接转 base64（会阻塞主线程） - 示例关键代码：
async function readImageFromClipboard() { try { const items = await navigator.clipboard.read(); for (const item of items) { for (const type of item.types) { if (/^image\//.test(type)) { const blob = await item.getType(type); const url = URL.createObjectURL(blob); document.querySelector('#img-preview').src = url; return; } } } } catch (err) { console.error('读取失败:', err.name); // 常见：NotAllowedError、NotFoundError } }
为什么 text/html 基本不可用
即使系统剪贴板里有 HTML（比如从 Word 或网页复制），navigator.clipboard.readText() 只返回纯文本；而 read() 中声明 text/html 类型，Chromium 通常不提供该格式的 Blob，返回空数组或直接跳过——这不是 bug，而是出于安全限制：防止网页静默窃取格式化内容或执行内联脚本。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
-
readText()永远只返回字符串，无视原始格式 -
read()中尝试item.getType('text/html')大概率抛出NotFoundError - 若真需 HTML 片段，唯一兼容方案是监听
paste事件，从event.clipboardData中取getData('text/html')（仅限粘贴动作，非任意读取）
权限与兼容性避坑要点
Async Clipboard API 的读取能力不是“申请一次永久有效”，每次调用都受上下文约束，且 iOS Safari 和 Firefox 完全不支持 read()。
立即学习“前端免费学习笔记（深入）”；
- 页面必须通过 HTTPS（localhost 除外），否则
navigator.clipboard为undefined - Firefox 仅支持
readText()，不支持read()；Safari 两者都不支持读取（仅支持写入） - 不要依赖
document.hasFocus()判断可读性——焦点存在 ≠ 权限就绪，仍需捕获异常 - 降级方案建议：优先用
paste事件 +clipboardData，fallback 到提示用户手动粘贴
真正跨浏览器可靠的剪贴板图片/HTML 读取，目前不存在银弹。能用 read() 拿到图片，已是 Chromium 给的特例窗口，别指望它扩展成通用富文本通道。
