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 不建议使用。