前端複製看這就夠了

優秀的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