注意事项
不要使用F12跟踪 F12 跟踪时此逻辑报错,为浏览器的防止泄露方式,开启之后,粘贴的方法会出现无焦点的异常提示
访问剪切板的代码
在chrome中使用navigator.clipboard ,此方法在高版本上才有
仅支持通过 HTTPS 提供的页面。为了防止滥用,只有当页面处于活动选项卡时才允许剪贴板访问。活动选项卡中的页面可以在不请求权限的情况下写入剪贴板,但从剪贴板中读取始终需要权限
chrome浏览器 场景下 实现复制数据到剪切板
if (navigator != null && window.location.toString().toUpperCase().indexOf("HTTPS") > -1) {
navigator.permissions.query({ name: "clipboard-write" }).then(result => {
if (result.state === "granted" || result.state == "prompt") {
navigator.clipboard.writeText(Cache.ClipboardData)
.then(() => {
console.log('文本已经成功复制到剪切板');
})
.catch(err => {
如果用户没有授权,则抛出异常
//console.error('无法复制此文本:', err);
});
}
else {
console.log("当前无操作权限。请使用最新版本Chrome浏览器,并在浏览器高级设置-页面设置中允许访问剪切板");
}
});
}
chrome浏览器场景下实现 从剪切板获取数据(右键粘贴)
if (navigator != null && window.location.toString().toUpperCase().indexOf("HTTPS") > -1) {//不要使用F12跟踪 F12 跟踪时此逻辑报错,为浏览器的防止泄露方式
navigator.permissions.query({ name: "clipboard-read" }).then(result => {
if (result.state === "granted" || result.state == "prompt") {
navigator.clipboard.readText()
.then(text => {
console.log('text为剪切板文本');
})
.catch(err => {
console.log("粘贴操作失败,请使用快捷键CTRL+V进行粘贴");
});
}
else {
console.log("当前无操作权限。请使用最新版本Chrome浏览器,并在浏览器高级设置-页面设置中允许访问剪切板");
}
});
}
浏览器设置
在设置中允许访问剪切板;受限于特殊处理方式,只有本地应用和HTTPS可以访问到这个权限,其他均不可访问
Clipboard API
Clipboard API 提供了响应剪贴板命令(剪切、复制和粘贴)与异步读写系统剪贴板的能力。从权限 API (Permissions API) 获取权限之后,才能访问剪贴板内容;如果用户没有授予权限,则不允许读取剪贴板内容。
可以使用全局的 Navigator.clipboard 来访问剪贴板。
Navigator.clipboard 属性返回 Clipboard 对象,所有操作都通过这个对象进行。
Clipboard 对象提供了四个方法,用来读写剪贴板。它们都是异步方法,返回 Promise 对象。
read( ) 方法
read() 方法可以从剪贴板读取任意数据,可以是文本数据,也可以是二进制数据(比如图片)。该方法需要用户明确给予许可。
read() 方法返回一个 Promise 对象。一旦该对象的状态变为 resolved,就可以获得一个数组,每个数组成员都是 ClipboardItem 对象的实例。
ClipboardItem 对象表示一个单独的剪贴项,每个剪贴项都拥有 types 属性和 getType( ) 方法。
ClipboardItem.types 属性返回一个数组,里面的成员是该剪贴项可用的 MIME 类型,比如某个剪贴项可以用 HTML 格式粘贴,也可以用纯文本格式粘贴,那么它就有两个 MIME 类型(text/html 和 text/plain)。
ClipboardItem.getType(type) 方法用于读取剪贴项的数据,返回一个 Promise 对象。该方法接受剪贴项的 MIME 类型作为参数,返回该类型的数据,该参数是必需的,否则会报错。
示例:
//获取权限
navigator.permissions .query({ name: 'clipboard-read' })
.then(result => {
if (result.state == 'granted' || result.state == 'prompt')
{
//读取剪贴板
navigator.clipboard.read().then(data => { console.log(data) }) }
else { alert('请允许读取剪贴板!') } })
readText( ) 方法
readText() 方法可以从剪贴板读取文本内容。该方法需要用户明确给予许可。
示例:
//获取权限
navigator.permissions .query({ name: 'clipboard-read' })
.then(result => {
if (result.state == 'granted' || result.state == 'prompt')
{
//读取剪贴板
navigator.clipboard.readText().
then(text => { console.log(text) })
}
else { alert('请允许读取剪贴板!') } })
write( ) 方法
write() 方法可以将任意数据写入剪贴板,可以是文本数据,也可以是二进制数据。该方法不需要用户许可。
write() 方法接受一个 ClipboardItem 实例作为参数,表示写入剪贴板的数据。
示例:
//写入一张图片
const imgURL = 'https://dummyimage.com/300.png'
const data = await fetch(imgURL)
const blob = await data.blob()
await navigator.clipboard.write([ new ClipboardItem({ [blob.type]: blob }) ])
注意,Chrome 浏览器目前只支持写入 PNG 格式的图片。
writeText( ) 方法
writeText() 方法可以写入文本内容至剪贴板。该方法不需要用户许可。
示例:
navigator.clipboard.writeText('写入剪贴板文本内容')
安全限制
由于用户可能把敏感数据(比如密码)放在剪贴板,允许脚本任意读取会产生安全风险,所以这个 API 的安全限制比较多。
首先,Chrome 浏览器规定,只有 HTTPS 协议的页面才能使用这个 API。不过,开发环境(localhost)允许使用非加密协议。
其次,调用时需要明确获得用户的许可。权限的具体实现使用了 Permissions API ,跟剪贴板相关的有两个权限:clipboard-write(写权限)和 clipboard-read(读权限)。“写权限”自动授予脚本,而“读权限”必须用户明确同意给予。也就是说,写入剪贴板,脚本可以自动完成,但是读取剪贴板时,浏览器会弹出一个对话框,询问用户是否同意读取
参考连接:
https://blog.csdn.net/Umbrella_Um/article/details/111067720
https://zhuanlan.zhihu.com/p/408359666