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);
  }
);

注意事项

navigator.clipboard在 https 协议下才能使用，或者安全域下才能使用。

安全域包括https,localhost、127.0.0.1、localhost:3000等。因此在使用前我们需要判断，同时也可以通过windows.isSecureContext属性来判断当前是否为安全域。