最近遇到一个功能, 点击按钮, 实现页面某块的内容被复制到剪切板, 可以在其他位置粘贴
效果图
由于第一次做这个功能, 找了不少帖子(主要参考的帖子).
效果一开始的需求 是文字和图片一起被复制. 但是最后也没有成功把图片复制下来, 只成功复制了文字.
下面是找到的很简单但是很实用的可以实现复制粘贴的功能,
下面展示可以拿去就能用的代码:
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();从选区中将所有的区域都从选区中移除。
-
