因为浏览器隐衷协定限度，以前浏览器是不容许间接拜访剪切板的，最近几年，随着web利用衰亡，W3C也在逐步拓宽JavaScript利用范畴，当初前端也能间接操作剪切板。文中依照拜访形式，分为间接拜访和间接拜访。

间接拜访

交互事件

用户交互事件，如paste（复制）、cut（剪切）、dragstart（拖拽）等，可能通过事件对象Event，拜访到剪切板。能够通过这部分操作，咱们能够格式化、自定义剪切板中内容。在contenteditable（可编辑）元素中，为了对立粘贴文本款式，咱们能够在元素的复制事件中，对文本格式进行过滤。

let editor = document.getElementById('editor)editor.addEventListener('paste', e => {  e.preventDefault()  let data = e.clipboardData.getData('text/plain')  // 格式化粘贴xml标签  data = data.replace(/>/g, '&gt;')      .replace(/</g, '&lt;')  let result = data.split('/n').join('<br />')  document.execCommand('insertHTML', null, result)})

除了文本，咱们还能获取其余内容吗？比方图像？答案是一半一半。为什么说一半一半？
失常状况下，咱们用截图软件截图，这部分是能在e.dataTransfer.files中获取到的，截图软件实际上是将base64文件放到了剪切板中。然而，如果咱们在操作系统中复制一张图片，在dataTransfer对象中，是获取不到的，这是浏览器隐衷协定限度，正如web页面不能间接操作系统文件（尽管局部浏览器曾经反对File API）一样，遇到这种需要，须要先放一放。

在业务开发中，测试童鞋们，总是能给人一些惊喜，谁说只能粘贴，我还能够拖拽，拖拽一些奇奇怪怪的内容进去，看，又发现一个Bug。可编辑元素默认是容许拖拽的，为防止这种形式，给咱们的抉择只有两个，第一，禁止拖拽，能够，然而比拟暴力，第二就是改写拖拽内容，监听dragstart事件。

let editor = document.getElementById('editor)editor.addEventListener('dragstart', e => {  e.preventDefault()  // 获取页面选中文本  let selection = window.getSelection()  let data = selection.toString()  e.dataTransfer.setData('text/plain', data)})

间接拜访

clipboard API

最近navigator新增了Clipboard API，不仅可能对剪切板文本、文件读取，还提供了写的操作，然而兼容性较差。文本读写Chrome 66版本即反对，然而image/png得76+才行。返回值是Promise，用起来比拟不便，然而对于剪切板的拜访，首先须要运行在https服务页面中，其次须要申请用户受权，受权通过后，能力拜访。根本应用示例如下：

  // 读取文本  navigator.clipboard.readText().then(    clipText => document.getElementById("editor").innerText = clipText  );  // 读取剪切板中图片  navigator.permissions.query({name: "clipboard-read"}).then(result => {    if (result.state == "granted" || result.state == "prompt") {      navigator.clipboard.read().then(data => {        for (let i=0; i<data.items.length; i++) {          if (data.items[i].type != "image/png") {            alert("Clipboard contains non-image data. Unable to access it.");          } else {            const blob = data.items[i].getType("image/png");            imgElem.src = URL.createObjectURL(blob);          }        }      });    }  });

electron clipboard

electron当初被越来越多的公司纳入到桌面利用开发中。因为剪切板操作始终是web利用开发的一个痛点，在electron中，不论主过程还是渲染过程，都能应用剪切板API，操作也丰盛许多，不仅可能操作文本、文件，还能操作Buffer,使得很多操作都成为可能。

const { clipboard } = require('electron')clipboard.writeText('hello i am a bit of text!')const text = clipboard.readText()console.log(text)

参考资料

  • navigator clipboard
  • electron clipboard