怎么在HTML中通过Async Clipboard API读取剪贴板中的富文本和图片-html教程-PHP中文网

不能直接读取富文本或图片二进制数据，navigator.clipboard.read()仅能读取指定mime类型的blob，但支持极有限：仅chromium稳定支持图片（image/png等），text/html常被忽略或降级为纯文本；需用户手势触发、https环境，且firefox、safari不支持read()。

怎么在html中通过async clipboard api读取剪贴板中的富文本和图片

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，而是出于安全限制：防止网页静默窃取格式化内容或执行内联脚本。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

readText() 永远只返回字符串，无视原始格式
read() 中尝试 item.getType('text/html') 大概率抛出 NotFoundError
若真需 HTML 片段，唯一兼容方案是监听 paste 事件，从 event.clipboardData 中取 getData('text/html')（仅限粘贴动作，非任意读取）