[译] javascript 检测剪贴板中的内容类型

原文地址：Detect the Content Type in the Clipboard

2023.03.06 By David Walsh

用户的剪贴板是操作系统和应用程序之间的“万能收集器”。当你使用网页浏览器时，你可以选择文本并复制，也可以右键点击图像并选择“复制图像”。这让我想到开发人员如何检测剪贴板中的内容类型。

你可以使用 navigator.clipboard API 获取用户剪贴板的内容。由于剪贴板可能包含敏感数据，因此该 API 需要用户权限。你可以使用以下 JavaScript 代码获取使用剪贴板 API 的权限：

const result = await navigator.permissions.query({name: "clipboard-write"});
if (result.state === "granted" || result.state === "prompt") {
  // 权限已授予
}

授予剪贴板权限后，你可以查询剪贴板以获取 ClipboardItem 实例，其中包含已复制的详细信息：

const [item] = await navigator.clipboard.read();

// 当文本被复制到剪贴板时...
item.types // ["text/plain"]

// 当从网站复制图像时...
item.types // ["text/html", "image/png"]

一旦你知道了剪贴板中的内容和MIME类型，就可以使用 readText() 获取剪贴板中的文本：

const content = await navigator.clipboard.readText();

对于图像，如果你有MIME类型和内容，你可以使用数据URI的 <img> 进行显示。了解用户剪贴板的内容对于展示他们复制的内容非常有帮助！

我的更多前端资讯

欢迎大家技术交流 资料分享 摸鱼 求助皆可 —链接