从方法名可以看出,writeText()方法仅支持写入文本,无其他数据类型的需求可直接使用该方法。
navigator.clipboard.writeText("想复制的文本作为参数") .then(() => { /* 剪贴板写入成功 */ }, () => { /* 剪贴板写入失败 */ });
write()
write()方法支持写入任意格式的数据至剪贴板,但传参的数据需要经过特殊处理,参考MDN文档有提供一些方法。
对于图片数据,常用的处理方法是利用Clipboard API提供的ClipboardItem接口,以MIME类型为key和blob为value的对象作为其参数,new一个相关实例,再作为write()方法的参数,写入剪贴板。
// 已准备好图片blob数据后 执行 navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]) .then(() => { /* 剪贴板写入成功 */ }, () => { /* 剪贴板写入失败 */ });
需要注意的是以上两种方法均为异步执行,执行成功与失败都有相应的回调。
介绍完复制要用的基础API,下面分别详细介绍下复制文本内容和图片内容的具体方法。
以下,推荐方法基于Clipboard API,向下兼容方法基于 document.execCommand(‘copy’)。
document.execCommand(‘copy’)
相关MDN外链地址
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
(请复制链接到浏览器中打开)
兼容性
document.execCommand(‘copy’)向document提供的execCommand方法传参"copy"所得的方法,该方法已被官方标记为弃用,较老版本的浏览器仍支持,可能在未来某版本中就会将它完全抹掉。
因此该方法仅适合在确定需要兼容不支持新方法的浏览器/WebView中使用。
验证目标浏览器是否支持该方法:
打开控制台输入document.execCommand(‘copy’)后回车,返回true就是支持,false就是不支持。
题外话:
读取用户剪贴板内容由于严重涉及到用户隐私,且使用
document.execCommand(‘paste’)粘贴没有一个明确获取用户权限的过程,该方法目前已完全被浏览器禁掉,因此在控制台输入它后返回的是false。