原生JS实现复制图片和文本内容

原生JS实现复制

这种方式主要使用到了几个比较重要的知识点，分别是range、selection、execCommand，主要实现方式是通过range来选中我们需要复制内容的dom元素，然后通过selection来获取选中的范围，最后通过execCommand(‘copy’)来实现复制

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

问题：如果粘贴板已有复制的内容，在复制不能覆盖，仍然是上次覆盖的内容
解决：复制前先调用window.getSelection().removeAllRanges()清空粘贴板