优秀的js复制开源库(基本上满足所有需求):
https://github.com/zenorocha/clipboard.js
前端本身其实也不复杂:
关键字:window.getSelection selection.addRange()
其实主要就是这两个对象的使用
1、普通的复制:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="desc">copycontent1</div> <button id="copyBtn" onclick="copy()">copy</button> <script> function copy() { let copyBtn = document.getElementById('copyBtn') const selection = window.getSelection() // selection对象 const range = document.createRange() // ranage对象 /** 从当前selection对象中移除所有选中的range对象, * 每个浏览器窗口有唯一的selection对象,正常情况下,每个selection只持有一个range对象, * 所以复制之前把之前选中的都给干掉,再选中target,不然会有异常 * (fixfox浏览器除外,支持同时选中两段内容,control + 鼠标拖动,所以只有火狐浏览器支持同时选中多断内容) */ if(selection.rangeCount > 0) selection.removeAllRanges() let target = document.getElementById('desc') // 选中目标节点 range.selectNode(target) // 向选区(Selection)中添加Range对象 selection.addRange(range) // 执行浏览器复制命令 document.execCommand('copy') // 到此成功 可以cv打印处复制内容 } </script></body></html>
2、换行复制(我们经常需要保证复制内容换行,可以用textarea来实现)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="desc"></div> <button id="copyBtn" onclick="copy()">copy</button> <script> target = '这是一段文字<br>这是一段文字<br>这是一段文字<br>这是一段文字<br>这是一段文字<br>这是一段文字<br>这是一段文字<br>' document.getElementById('desc').innerHTML = target function copy() { // 创建textarea let textArea = document.createElement('textarea') // 转成textArea需要的换行 textArea.value = target.replace(/<br>/g,'\r\n') document.body.appendChild(textArea) // input、textarea自带的方法,可以选中目标内容 textArea.select() // 复制 document.execCommand('copy') // 移除,这里的创建和移除可以换成业务喜欢的方式 document.body.removeChild(textArea) } </script></body></html>
如果不是多行复制,也可以直接用input实现,方法通textarea。