Navigator clipboard介绍使用
# 概述
Navigator.clipboard
对象提供了系统剪贴板读写访问能力,用以取代document.execCommand()
,后者存在一些问题,如浏览器兼容性不一致、安全性问题和缺乏语义化,W3C 已将其从规范中移除。
所有 Clipboard API 方法都是异步的,并且返回一个Promise
对象,在剪贴板访问完成后被兑现;如果剪贴板访问被拒绝,promise 对象会被拒绝。
# 方法
read()
: 从剪贴板读取数据,返回一个 promise 对象,在检索到数据后,promise 将兑现一个ClipboardItem
对象的数组来提供剪切板数据readText()
: 从剪贴板读取文本数据,返回一个 promise 对象,在检索到文本后,promise 将兑现一个字符串write()
:写入任意数据到操作系统的剪贴板中,这是一个异步操作writeText()
: 写入文本数据到操作系统的剪贴板中,待文本被完全写入剪贴板后,返回的 promise 将被兑现
示例如下:
navigator.clipboard.writeText(text).then(
() => {
ElMessage.success("复制文本成功");
},
(err) => {
console.log("🚀 ~ copyText ~ err:", err);
}
);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 注意事项
navigator.clipboard
在 https 协议下才能使用,或者安全域下才能使用。
安全域包括https
,localhost
、127.0.0.1
、localhost:3000
等。因此在使用前我们需要判断,同时也可以通过windows.isSecureContext
属性来判断当前是否为安全域。
编辑 (opens new window)
上次更新: 2024/08/23, 06:30:20