如何使用异步剪切板 AsyncClipboard API

时间:2022-06-19
本文章向大家介绍如何使用异步剪切板 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 方法,但浏览器没有实现,可以读取或写入其他类型格式的数据