前端操作剪切板不完全指北

由于浏览器隐私协议限制，以前浏览器是不允许直接访问剪切板的，最近几年，随着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, '>')
      .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