实现点击按钮复制页面某个区域的文本

最近遇到一个功能, 点击按钮, 实现页面某块的内容被复制到剪切板, 可以在其他位置粘贴

效果图

由于第一次做这个功能, 找了不少帖子(主要参考的帖子).
效果一开始的需求 是文字和图片一起被复制. 但是最后也没有成功把图片复制下来, 只成功复制了文字.
下面是找到的很简单但是很实用的可以实现复制粘贴的功能,

下面展示可以拿去就能用的代码:

  copyMethod(id) {
    let copyDOM = document.getElementById(id);    //获取要复制的Dom元素
    let range = document.createRange();           //创建range(表示包含节点和部分文本节点的文档片段)
    range.selectNode(copyDOM);                    //使用创建的创建range选择Dom
    window.getSelection().addRange(range);        //Selection 对象，表示用户选择的文本,添加进入range
    document.execCommand('copy');                 // 执行复制
    window.getSelection().removeAllRanges();      //从选区中将所有的区域都从选区中移除。
  }

• 解释下代码:
  • let copyDOM = document.getElementById(id); 这里获取的是你需要复制的内容的外面的最大的包裹, 被复制的内容都是他的子节点
  • let range = document.createRange();先创建一个range, 他可以用selectNode()方法选取一个元素的包含节点和部分文本节点的文档片段,故先创建好,
  • range.selectNode(copyDOM);用创建好的range,使用selectNode()选取元素内节点和部分文本节点的文本片段
  • window.getSelection().addRange(range);把range区域放入选区
  • document.execCommand('copy'); 执行复制
  • window.getSelection().removeAllRanges(); 从选区中将所有的区域都从选区中移除。