如何使用异步剪切板 AsyncClipboard API

如何使用异步剪切板 AsyncClipboard API

⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅

长时间我们一直在使用 document.execCommand 来与剪切板做交互，尤其是基本上都在使用 clipboard.js 这个库，其基本原理也是插入 DOM 树中一个隐藏的 textarea 元素，然后将要复制的文本写入到 textarea 元素中，最后调用 textarea 的 select 方法和 document.execCommand('copy') 方法，然后删除 textarea 元素

虽说 execCommand 能够一定程度上解决浏览器兼容问题：

即便是使用一个简单的剪切板都这么费劲需要一个第三方库，而且剪切板的这种方法是同步的。同步方法交互剪切板的阻塞、有限的访问权限、跨浏览器体验不一致、对多种数据类型的支持有限等问题解决起来也是麻烦。

这里有篇文章讲述到底该如何用 JS 操作剪切板：https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

? 无论如何，异步剪切板 Async Clipboard API 这个 API 在 Chrome 66 版本以上得到了支持：

我们可以在新版本中使用这个异步版本的剪切板，那么具体该如何使用这个 API 呢

权限

使用这个 API 当然是需要获取权限的，我们可以使用 PaymentRequest 这个 API 来监听是否拥有这个权限：

对应的有两个 query 查询条件：

{ name: 'clipboard-read' }
{ name: 'clipboard-write' }

读取剪切板

调用 clipboard 对象下的 readText 方法即可 ?

navigator.clipboard.readText().then(console.log)

写入剪切板

navigator.clipboard.writeText(+new Date())

上面的代码每次刷新页面都会写入最新时间戳

另外还有 read 和 write 方法，但浏览器没有实现，可以读取或写入其他类型格式的数据