前端复制看这就够了

432 阅读1分钟

优秀的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。