关于JS操作剪贴板的那些事
最近开发上有个需求是要实现一键复制图片的功能,查阅了相关资料后发现有几种可以实现的方式,但总体而言网上的信息都较为零散,所以这里总结一下自己最近的心得,有需要的可以借鉴一下。
原生JS实现复制
这种方式主要使用到了几个比较重要的知识点,分别是range、selection、execCommand,主要实现方式是通过range来选中我们需要复制内容的dom元素,然后通过selection来获取选中的范围,最后通过execCommand(‘copy’)来实现复制
先来讲讲range
Range
介绍
官方解释是:Range 对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域。
其实就是我们用鼠标按住拖动选中的范围,这个范围一般是一个开始节点和一个结束节点之间的范围,这里不详细讲,有需要可以看官方文档Rang对象详解。
使用
创建: let range = document.createRange()
选中某个节点: range.selectNode(node)
选中某个节点的内容: range.selectNodeContents(node)
getSelection
介绍
官方解释是:getSelection()方法可以返回一个Selection对象,用于表示用户选择的文本范围或插入符的当前位置。详情看getSelecion对象详解。
使用
创建: let selection = window.getSelection()
获取选中内容: let result = selection.toString()
添加一个选中范围: selection.addRange(range)
清空选中: selection.removeAllRange()
execCommand
文档对象暴露 execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容,大多数命令影响文档的选择(粗体,斜体等),而其他命令插入新元素(添加链接)或影响整行(缩进)。当使用 contentEditable 时,调用 execCommand() 将影响当前活动的可编辑元素。
这里仅使用document.execCommand(‘copy’)来实现复制
copy代码
function copyNode(node) {
//console.log(node)
let selection = window.getSelection()
let range = document.createRange()
range.selectNode(node);
//range.deleteContents()
selection.addRange(range)
//console.log(range)
document.execCommand('copy')
selection.removeAllRanges()
}
将需要复制的元素对象传入copyNode方法即可复制该元素的内容,该元素节点内可以包含文本,图片等内容;
但这里仅限于复制http协议的图片,如果图片是https协议或者是base64编码(这是我要最终实现的目标)的图片,是无法复制的,如果有技术大大可以实现复制base64的图片也请告诉我实现的方法。
因为实际上复制的是一段html代码,所以如果复制的元素包含http协议图片,仅能黏贴到支持text/html格式的输入框内,而且需要一定的网络来进行,否则无法成功复制。
(以上阐述均是自己的见解和总结,如果你有不同的看法或者我有什么地方说错了,敬请谅解,也欢迎你和我交流,如果你知道如何实现复制base64图片,请你一定要告诉我,谢谢!可以如有版权侵权请告知我)
之后也会发布关于另外一种框架来实现复制,以及如何在复制的时候自动追加内容的方法以及原理,谢谢你的关注