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 (标准推荐)

从剪贴板读取文本

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) }) }