JavaScript 獲取和設置剪貼板中的內容

通過 JavaScript 在瀏覽器中獲取或設置剪貼板中的內容，常用於一鍵複製或使用網頁油猴複製限制文本

使用 execCommand (已棄用)

寫入文本到剪貼板

document.onclick = function() {
  let text = 'hello world'
  let dom_input = document.createElement('input')
  dom_input.value = text
  document.body.appendChild(dom_input)
  dom_input.select()
  document.execCommand("Copy")
  dom_input.parentElement.removeChild(dom_input)
}

註意

用戶和頁面要先有交互(點擊行為)才能複製成功

使用 clipboard (標準推薦)

提示

使用 clipboard 只能獲取剪貼板中的文字和圖片，並且需要用戶授權，某些操作需要有用戶交互(點擊行為)

從剪貼板讀取文本

navigator.clipboard.readText().then((text) => {
  console.log(text)
}, (error) => { console.log(error) })

從剪貼板讀取文件

document.onclick = function() {
  navigator.clipboard.read().then((file_list) => {
    for(let item of file_list) {
      for(let file_type of item.types) {
        console.log('文件類型', file_type)
        item.getType(file_type).then(res => {
          if(['text/html', 'text/plain'].includes(file_type)) {
            res.text().then(text => {
              console.log(text)
            }, (error) => { console.log(error) })
          } else {
            open(URL.createObjectURL(res))
          }
        }, (error) => { console.log(error) })
      }
    }
  }, (error) => { console.log(error) })
}

寫入文本到剪貼板

navigator.clipboard.writeText('hello world').then(function() {
  console.log('success')
}, function(error) { console.log(error)} )

寫入文件到剪貼板

let input = document.createElement('input')
input.type = 'file'
document.body.appendChild(input)
input.onchange = function(ev) {
  let f = ev.target.files[0]
  let item = [ new ClipboardItem({ 'image/png': new Blob([f], {type: 'image/png'}) }) ] // 寫入圖片
  let text = [ new ClipboardItem({ 'text/plain': new Blob(['hello world'], {type: 'text/plain'}) }) ] // 寫入文本
  navigator.clipboard.write(item).then(function() {
    console.log('success')
  }, function(error) { console.log(error) })
}

註意

以上代碼均在 Chrome 107.0.5304.88 測試通過，但不能保證其他瀏覽器也能用，其中 clipboard.write() 存在 bug 不建議使用。