前端复制看这就够了

优秀的js复制开源库(基本上知足全部需求)：html

https://github.com/zenorocha/clipboard.js
复制代码

前端自己其实也不复杂：前端

关键字：window.getSelection selection.addRange()git

其实主要就是这两个对象的使用github

一、普通的复制：浏览器

<!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>
复制代码

二、换行复制（咱们常常须要保证复制内容换行，能够用textarea来实现）markdown

<!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。app