 Navigator clipboard介绍使用
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
