最近遇到一個功能, 點擊按鈕, 實現頁面某塊的內容被復制到剪切板, 可以在其他位置粘貼
效果圖
由于第一次做這個功能, 找了不少帖子(主要參考的帖子).
效果一開始的需求 是文字和圖片一起被復制. 但是最后也沒有成功把圖片復制下來, 只成功復制了文字.
下面是找到的很簡單但是很實用的可以實現復制粘貼的功能,
下面展示可以拿去就能用的代碼:
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();從選區中將所有的區域都從選區中移除。
-
