原生JS實現復制圖片和文本內容

原生JS實現復制

這種方式主要使用到了幾個比較重要的知識點，分別是range、selection、execCommand，主要實現方式是通過range來選中我們需要復制內容的dom元素，然后通過selection來獲取選中的范圍，最后通過execCommand(‘copy’)來實現復制

Range

介紹

官方解釋是：Range 對象表示文檔的連續范圍區域，如用戶在瀏覽器窗口中用鼠標拖動選中的區域。
其實就是我們用鼠標按住拖動選中的范圍，這個范圍一般是一個開始節點和一個結束節點之間的范圍，這里不詳細講，有需要可以看官方文檔Rang對象詳解。

使用

創建： let range = document.createRange()
選中某個節點： range.selectNode(node)
選中某個節點的內容： range.selectNodeContents(node)

getSelection

介紹

官方解釋是：getSelection()方法可以返回一個Selection對象，用於表示用戶選擇的文本范圍或插入符的當前位置。詳情看getSelecion對象詳解。#

使用

創建： let selection = window.getSelection()
獲取選中內容： let result = selection.toString()
添加一個選中范圍： selection.addRange(range)
清空選中： selection.removeAllRange()

execCommand

文檔對象暴露 execCommand 方法，該方法允許運行命令來操縱可編輯區域的內容，大多數命令影響文檔的選擇（粗體，斜體等），而其他命令插入新元素（添加鏈接）或影響整行（縮進）。當使用 contentEditable 時，調用 execCommand() 將影響當前活動的可編輯元素。
這里僅使用document.execCommand(‘copy’)來實現復制

copy代碼

function copyNode(node) {
  //console.log(node)
  let selection = window.getSelection()
  let range = document.createRange()
  range.selectNode(node);
  //range.deleteContents()
  selection.addRange(range)
  //console.log(range)
  document.execCommand('copy')
  selection.removeAllRanges()
}

問題：如果粘貼板已有復制的內容，在復制不能覆蓋，仍然是上次覆蓋的內容
解決：復制前先調用window.getSelection().removeAllRanges()清空粘貼板